美文网首页
Flutter基础(三)

Flutter基础(三)

作者: Mr_不靠谱_先森 | 来源:发表于2020-05-28 18:07 被阅读0次

    布局

    • Row & Column & Center 行列轴布局
    • Align 角定位布局
    child: Align(
                    alignment: Alignment.topLeft,
                    child: Text(
                      "hello container",
                      style: TextStyle(fontSize: 30, color: Colors.black),
                    )),
    
    • Stack & Positioned 绝对定位
      当然还有绝对定位的需求,这在css里,使用position:absolute就搞定了,但是在flutter里,需要借助stack+ positioned两个widget一起组合使用
    child: Stack(
            children: <Widget>[
              Image(
                image: NetworkImage(
                    "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white-d0c9fe2af5.png"),
              ),
              Positioned(
                top: 20,
                right: 20,
                child: Image.network(
                  "https://ossweb-img.qq.com/upload/adw/image/20191022/627bdf586e0de8a29d5a48b86700a790.jpeg",
                  width: 100.0,
                  height: 100.0,
                ),
              )
            ],
          )),
    
    • Flex & Expanded 流式布局
      Flex流式布局作为前端同学都熟悉,之前讲过的Row,Column,其实都是继承自Flex,也属于流式布局。
      如果轴向不确定,使用Flex,通过修改direction的值设定轴向
      如果轴向已确定,使用Row,Column,布局更简洁,更有语义化
    import 'package:flutter/material.dart';
    
    class FlexPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("flex page"),
          ),
          body: Flex(
            direction: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 300,
                height: 100,
                color: Colors.red,
              ),
              Expanded(
                flex: 1,
                child: Container(
                  height: 100.0,
                  color: Colors.blue,
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  height: 100.0,
                  color: Colors.green,
                ),
              ),
            ],
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter基础(三)

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