美文网首页
Flutter Ailgn布局

Flutter Ailgn布局

作者: 喜剧收尾_XWX | 来源:发表于2020-09-03 08:13 被阅读0次
    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,
                    ),
                  ),
                ],
              )),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter Ailgn布局

          本文链接:https://www.haomeiwen.com/subject/qbbydktx.html