Flutter Ailgn布局

2020-09-03  本文已影响0人  喜剧收尾_XWX
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "Ailgn布局",
      home: Scaffold(
          appBar: AppBar(
            title: Text('Ailgn布局'),
          ),
          body: Stack(
            children: <Widget>[
              //左上角
              Align(
                //对齐属性,确定位置
                alignment: FractionalOffset(0.0, 0.0),
                child: Image.asset(
                  'images/1.jpeg',
                  width: 120,
                  height: 120,
                ),
              ),

              //右上角
              Align(
                alignment: FractionalOffset(1.0, 0.0),
                child: Image.asset(
                  'images/2.jpeg',
                  width: 120,
                  height: 120,
                ),
              ),

              //中心
              Align(
                alignment: FractionalOffset.center,
                child: Image.asset(
                  'images/3.jpeg',
                  width: 120,
                  height: 120,
                ),
              ),

              //左下角
              Align(
                alignment: FractionalOffset.bottomLeft,
                child: Image.asset(
                  'images/4.jpeg',
                  width: 120,
                  height: 120,
                ),
              ),

              //右下角
              Align(
                alignment: FractionalOffset.bottomRight,
                child: Image.asset(
                  'images/5.jpeg',
                  width: 120,
                  height: 120,
                ),
              ),
            ],
          )),
    );
  }
}
上一篇下一篇

猜你喜欢

热点阅读