扩展和灵活不填满整行

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),
          ),
        ),
      ),
    );
  }
}

结果是这样的：

第一个容器不是应该填满设置灵活的小部件后剩下的 space 吗？由于它也属于一个包含 2 个扩展小部件的子列，因此列宽大小应该是整个屏幕。这意味着该行也应该是整个屏幕。我本以为第一行中展开的绿色小部件会填充该行，直到没有像下图那样留下白色：

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

Answer 1

在进入正题之前，让我先从 FlexFit 说起。 FlexFit.tight 允许 children 填充 space 的其余部分，但 FlexFit.loose 允许 children 根据需要调整自己的大小。

现在，正如您可能知道的那样，Expanded 与 tight-fitting 是灵活的，即 fit: FlexFit.tight。

Expanded(
  child: child,
)

is equivalent to

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

现在，让我们举个例子。

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

来到 Flexible 小部件，默认情况下，它跟随 loose-fitting。所以它对 children 说它们可以扩展到 50%，但没有限制它们必须全部 space。他们可以随心所欲 space 但上限设置为 50%。在你的情况下，它只需要 space 来适应带有一些填充的“灵活”文本。所以它需要。

扩展和灵活不填满整行

Expanded and flexible not filling entire row

user-interface

widget

flutter