美文网首页
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