Flutter Expanded和Flexible组件

flutter Expanded和Flexible

Expanded

Expanded只能用于Row,Column布局，可以用来嵌套子view利用剩余空间对占位空间进行延展，Expanded父类是Flexible，相当于一个fit类型为tight的Flexible。

• 参数flex,[int]：剩余空间分配占比
• 参数child,[Widget]：子view

Flexible

Flexible只能用于Row,Column布局，可嵌套子view利用剩余空间对占位空间进行延展，也可以指定适应类型。
这里当参数fit==FlexFit.tight时，就相当于是Expanded布局，当参数fit==FlexFit.loose则为默认方式。

如下图，同样的标题和右边icon，Expanded和Flexible的表现

示例代码

Widget _testview1() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("1、如下标题内容用Expanded包裹："),
        Divider(),
        Row(
          children: [
            Expanded(
              child: Text(
                '我是标题我是标题我是标题我',
                style: TextStyle(color: Colors.red),
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Icon(
              Icons.menu,
              color: Colors.red,
            ),
          ],
        ),
        SizedBox(height: 20),
        Text("2、如下标题内容用Flexible包裹："),
        Divider(),
        Row(
          children: [
            Flexible(
              child: Text(
                '我是标题我是标题我是标题我',
                style: TextStyle(color: Colors.red),
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Icon(
              Icons.menu,
              color: Colors.red,
            ),
          ],
        )
      ],
    );
  }

在开发过程中，不能只想到Expanded，其实在很多场景中，Flexible都能很好地解决布局问题。