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

Posted 2023-02-23

【中文标题】扩展且灵活，不会填满整行

【英文标题】：Expanded and flexible not filling entire row

【发布时间】：2021-05-02 02:59:51

【问题描述】：

您好，我有以下代码

  @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 个扩展小部件的子列的列，因此列宽大小应该是整个屏幕。这意味着该行也应该是整个屏幕。我本来希望第一行中扩展的绿色小部件填充该行，直到没有留下白色，如下图所示：

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

【问题讨论】：

crossAxisAlignment: CrossAxisAlignment.stretch,

这会引发错误

【参考方案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%。在您的情况下，它只需要空间来容纳带有一些填充的“灵活”文本。所以它需要它。

【讨论】：

感谢您的详细解答。我不太明白的是为什么这些小部件每个都占用 50% 的可用空间，下图来自本周视频的颤振小部件，在这种情况下，每个小部件都应该是可用空间的 1/3，但是灵活的一个 cleary 扩展了它自己的 1/3。无论如何，我怎样才能填满整行？

这是因为 Flex 属性。如果连续有两个小部件，每个小部件都带有 flex : 1，则表示在两个小部件之间划分可用空间。在这里，可用空间为 100%，即屏幕大小。所以这些小部件每个都获得一半的屏幕大小。您可能需要了解基本布局功能。查看这篇非常棒的文章。希望它能解决你的概念。 medium.com/flutter-community/…

谢谢，我现在明白这是因为其中两个小部件具有弹性系数。