扩展灵活，不填满整行

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

Answer 2

Pushpendra 解释了 Flex 的工作原理以及为什么在使用两个 Flex 项目时它们最多占用一半的屏幕。但是，没有答案显示如何使 一个项目填充其余空间，包括其他项目未占用的空间。

技巧是仅使用一个占据所有空间的弹性项目（

Expanded

）并将其他项目限制为

maxWidth = half of the available width

。这可以通过使用

LayoutBuilder

获取可用宽度和

ConstraintedBox

来约束一个小部件而不使用 Flex 来实现 - 这允许

Expanded

占据一半以上的空间（所有这些都不是由

ConstrainedBox

占据的） ）：

LayoutBuilder(builder: (context, constraints) {
  return Row(
    children: [
      ConstrainedBox(
        constraints: BoxConstraints(maxWidth: constraints.maxWidth * 0.5),
        child: Text(
          text1,
          overflow: TextOverflow.fade,
          softWrap: false,
        ),
      ),
      Expanded(
        child: Text(
          text2,
          overflow: TextOverflow.fade,
          softWrap: false,
        ),
      ),
    ],
  );
});

Answer 3

Flutter Expanded 与 Flexible 之间的区别：

Expanded 是“灵活且紧密配合”的简写。扩展类通过贴合属性 FlexFit.tight 扩展了灵活类。

扩展：当您想要在子级之间均匀分配剩余空间时使用。

灵活：当您需要精确控制如何在具有不同弹性系数的子级之间分配空间时使用。

给定链接中解释了与代码的详细差异： https://www.codecappuccino.com/post/flutter-expanded-vs-flexible