flutter 动手篇2 - 弹性布局 Flex

￡神魔★判官ぃ 2021-09-12 05:46 434阅读 0赞

## 弹性布局 Flex ##

> 弹性布局

弹性布局允许子widget按照一定比例来分配父容器空间，弹性布局的概念在其UI系统中也都存在，如H5中的弹性盒子布局，Android中的FlexboxLayout。Flutter中的弹性布局主要通过Flex和Expanded来配合实现。

> Flex

Flex可以沿着水平或垂直方向排列子widget，如果你知道主轴方向，使用Row或Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用Flex的地方一定可以使用Row或Column。Flex本身功能是很强大的，它也可以和Expanded配合实现弹性布局，接下来我们只讨论Flex和弹性布局相关的属性(其它属性已经在介绍Row和Column时介绍过了)。

Flex({
      ...
      @required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
      List<Widget> children = const <Widget>[],
    })

Flex继承自MultiChildRenderObjectWidget，对应的RenderObject为RenderFlex，RenderFlex中实现了其布局算法。

> Expanded

可以按比例“扩伸”Row、Column和Flex子widget所占用的空间。

const Expanded({
      int flex = 1, 
      @required Widget child,
    })

flex为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。例子：

import 'package:flutter/material.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flex',
          theme: new ThemeData(
            primarySwatch: Colors.lightBlue,
          ),
          home: new MyHome(),
        );
      }
    }
    
    class MyHome extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: AppBar(
              title: Text("Flex", style: TextStyle(color: Colors.white))
          ),
          body: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Column(
              children: <Widget>[
                Flex(
                  direction: Axis.horizontal, //水平方向
                  children: <Widget>[
                    Expanded(
                      flex: 3,
                      child: Container(
                        height: 30.0,
                        color: Colors.teal,
                      ),
                    ),
                    Expanded(
                      flex: 4,
                      child: Container(
                        height: 30.0,
                        color: Colors.tealAccent,
                      ),
                    )
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: SizedBox(
                    height: 100.0,
                    child: Flex(
                      direction: Axis.vertical, //垂直方向
                      children: <Widget>[
                        Expanded(
                          flex: 4,
                          child: Container(
                            height: 40.0,
                            color: Colors.green,
                          )
                        ),
                        Spacer(
                          flex: 1, //空白
                        ),
                        Expanded(
                          flex: 2,
                          child: Container(
                            height: 10.0,
                            color: Colors.amber,
                          ),
                        ),
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        );
      }
    }

效果展示//

![6587214-b9955ea8c31a3703.png][]

image.png

示例中的Spacer的功能是占用指定比例的空间，实际上它只是Expanded的一个包装：

new Expanded(
      flex: flex,
      child: const SizedBox(
        height: 0.0,
        width: 0.0,
      ),
    );

[6587214-b9955ea8c31a3703.png]: /images/20210804/1a22ef4826e146ccaf4aedb5b37847f3.png