扩展且灵活，不填充整行

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%。在您的情况下，它只需要空间来容纳“灵活”文本和一些填充。所以需要这样。