Flutter Expanded VS Flexible

在Flutter中，当需要填充容器（Row, Column, or Flex）剩余空间的时候，可以使用Expanded或Flexible，本文对这二者的差异做一分析。

分析

Expanded 比较容易理解，他会强制child改变大小，占据容器的剩余空间，如果有多个Expanded的话，会按照他们的flex占比来分配每个child可以占据的空间大小。

Flexible 稍微特殊一些，有时候看起来似乎他的child占据的大小既不全是父布局的剩余空间，也不全是刚刚包裹child内容的大小。

让我们看一下Flexible的源码：

const Flexible({
  Key? key,
  this.flex = 1,
  this.fit = FlexFit.loose,
  required Widget child,
}) : super(key: key, child: child);

可以看到，默认情况下他使用的fit模式是FlexFit.loose，查阅文档定义可知：

FlexFit.loose：The child can be at most as large as the available space (but is allowed to be smaller).

FlexFit.tight：The child is forced to fill the available space.

也就是说，默认情况下，Flexible的child最大可以是父容器分配给Flexible的大小（假设为MaxSzie）。

但是，如果child的大小比这个MaxSzie要小的话，那么允许child按照自己的大小来显示。

而如果Flexible的fit是FlexFit.tight的话，就会强制child大小为MaxSzie，效果和Expanded一致，实际上Expanded就是FlexFit.tight模式的Flexible：

class Expanded extends Flexible {
  /// Creates a widget that expands a child of a [Row], [Column], or [Flex]
  /// so that the child fills the available space along the flex widget's
  /// main axis.
  const Expanded({
    Key? key,
    int flex = 1,
    required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);
}

对于上述的结论，我们可以从下面的代码中得到证实：

main() => runApp(MaterialApp(home: BodyWidget()));

class BodyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BodyState();
  }
}

class _BodyState extends State<BodyWidget> {
  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    final int count = 100;

    return Material(
      child: Container(
        color: Colors.grey.shade200,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                Container(
                    color: Colors.teal,
                    child: Text(
                      'Container Text ',
                    )),
                Flexible(
                  child: Container(
                      color: Colors.blue,
                      child: Text(' Text.Flexible Text.Flexible Text.Flexible.')),
                ),
                Flexible(
                  child: Container(
                      color: Colors.yellow, child: Text('Flexible Text.')),
                ),
                Flexible(
                  child: Container(
                      color: Colors.lightGreen, child: Text('Flexible.')),
                ),
              ],
            ),
            SizedBox(
              height: 80,
              width: width,
              child: ListView.builder(
                itemBuilder: (context, index) {
                  return SizedBox(
                    width: width / count,
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      children: [
                        Container(
                          width: 1,
                          height: index % 5 == 0 ? 30 : 20,
                          color: Colors.purple,
                        ),
                        if (index % 5 == 0)
                          Flexible(
                            child: Text(
                              '$index',
                              style: const TextStyle(fontSize: 5),
                            ),
                          ),
                      ],
                    ),
                  );
                },
                itemCount: count,
                scrollDirection: Axis.horizontal,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

总结

Expanded和Flexible默认情况下都会按照flex占据父容器剩余的可用空间，但是不同的是，Expanded会强制child改变大小为父容器分配的大小，而Flexible则会告诉child，最大只能是父容器分配的大小，要是child想要小一些的话，也可以按照child的大小显示。

如果改变Flexible的fit为FlexFit.tight的话，Expanded和Flexible没有差别。