Flutter完全开发手册
  • Flutter 页面布局 Flex Expanded弹性布局

    弹性布局允许子widget按照一定比例来分配父容器空间,以及动态填充剩余空间,Flutter中的弹性布局主要通过Flex和Expanded来配合实现,常见的开发中和Row或者Column组件组合起来使用。

    Flex

    Flex组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方向,使用Row或Column会方便一些,因为Row和Column都继承自Flex,参数基本相同,所以能使用Flex的地方基本上都可以使用Row或Column。Flex本身功能是很强大的,它也可以和Expanded组件配合实现弹性布局。

    Expanded

    可以按比例“扩伸”Row、Column和Flex子组件所占用的空间。
    
      Widget build(BuildContext context) {
        return Padding(
          padding: EdgeInsets.all(10),
          child: Row(
            children: [
              const Expanded(
                  flex: 1,
                  child: Text(
                    "深秋冬装搭配一整套韩剧小香学院风富家千金感穿搭套装连衣裙子女深秋冬装搭配一整套韩剧小香学院风富家千金感穿搭套装连衣裙子女",
                    style: TextStyle(fontSize: 16),
                  )),
              Container(
                width: 60,
                height: 60,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: Colors.blue, borderRadius: BorderRadius.circular(10)),
                child: const Text(
                  "订购",
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              )
            ],
          ),
        );
      }
    

    Flutter自学_弹性布局(Flex和Expanded)

    
    Widget build(BuildContext context) {
        return ListView(
          padding:const EdgeInsets.all(10),
          children: [
            Container(
              margin:const EdgeInsets.only(bottom: 10),
              height: 200,
              child: Image.network(
                "https://www.flutterschool.cn/images/xhs/1.png",
                fit: BoxFit.cover,
              ),
            ),
            Row(
              children: [
                Expanded(
                    flex: 2,
                    child: SizedBox(
                      height: 210,
                      child: Image.network(
                        "https://www.flutterschool.cn/images/xhs/2.png",
                        fit: BoxFit.cover,
                      ),
                    )),
                Expanded(
                    flex: 1,
                    child: SizedBox(
                        height: 210,
                        child: Column(
                          children: [
                            Container(
                              margin:const EdgeInsets.only(left: 10,bottom: 10),
                              height: 100,
                              child: Image.network(
                                "https://www.flutterschool.cn/images/xhs/3.png",
                                fit: BoxFit.cover,
                              ),
                            ),
                            Container(
                              margin:const EdgeInsets.only(left: 10),
                              height: 100,
                              child: Image.network(
                                "https://www.flutterschool.cn/images/xhs/4.png",
                                fit: BoxFit.cover,
                              ),
                            )
                          ],
                        ))),
              ],
            )
          ],
        );
    

    Flutter自学_弹性布局(Flex和Expanded)