扩展且灵活，不会填满整行

Question

您好，我有以下代码

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body:
       Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Row(
            mainAxisSize: MainAxisSize.max,
            children: [
             // FlexibleWidget(),
              ExpandedWidget(),
              FlexibleWidget(),
            ],
          ),
          Row(
            children: [
              ExpandedWidget(),
              ExpandedWidget(),
            ],
          ),
          Row(mainAxisSize: MainAxisSize.min,
            children: [
              FlexibleWidget(),
              FlexibleWidget(),
            ],
          ),
          Row(mainAxisSize: MainAxisSize.min,
            children: [
              FlexibleWidget(),
              ExpandedWidget(),
            ],
          ),
        ],
     ),
    );
  }
}

class ExpandedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.green,
          border: Border.all(color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            'Expanded',
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
      ),
    );
  }
}

class FlexibleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Flexible(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.red,
          border: Border.all(color: Colors.white),
        ),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            'Flexible',
            style: TextStyle(color: Colors.black, fontSize: 24),
          ),
        ),
      ),
    );
  }
}

结果是这样的：

第一个容器不应该填充设置灵活小部件后留下的空间吗？由于它也属于具有 2 个扩展小部件的子列的列，因此列宽大小应该是整个屏幕。这意味着该行也应该是整个屏幕。我本来希望第一行中扩展的绿色小部件填充该行，直到没有留下白色，如下图所示：

相反，它只填满了页面的一半。谁能解释这种行为？

Answer 1

在进入正题之前，让我先从 FlexFit 开始。 FlexFit.tight 允许孩子们填充其余空间，但FlexFit.loose 允许孩子们随意调整自己的大小。

现在，正如您可能知道的那样，Expanded 只不过是紧身的灵活，即fit: FlexFit.tight。

Expanded(
  child: child,
)

is equivalent to

Flexible(
  fit: FlexFit.tight,
  child: child,
)

现在，让我们举个例子。

对于第一个块，有两个带有 Flex 1 的小部件（默认情况下），它将屏幕分成两半；每个人将获得 50%。这并不意味着他们必须占据 50% 的屏幕。这意味着它们可以扩展到屏幕的 50%。所以，Expanded 小部件就是这样做的。贴合紧密，占据屏幕的 50%。

来到Flexible 小部件，默认情况下，它遵循宽松的。所以它告诉它的孩子，他们可以扩大到 50%，但没有限制他们必须占据所有空间。他们可以占用他们想要的任何空间，但上限设置为 50%。在您的情况下，它只需要空间来容纳带有一些填充的“灵活”文本。所以它需要它。