Flutter基础(三)

布局

• 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,
            ),
          ),
        ],
      ),
    );
  }
}