Flutter - 当兄弟姐妹灵活时，扩展不会占用所有可用空间

Posted 2023-02-23

【中文标题】Flutter - 当兄弟姐妹灵活时，扩展不会占用所有可用空间

【英文标题】：Flutter - Expanded doesn't take all available space when a sibling is Flexible

【发布时间】：2019-12-27 05:40:44

【问题描述】：

问题的图像，显​​示为彩色矩形

我希望 Column 的第一个孩子是灵活的，第二个孩子占据整个剩余空间。显然，这不起作用。

我现在知道这是预期的行为。我将不胜感激一种解决方法。

我尝试在第一个孩子上使用 FittedBox 而不是 Flexible，但它不起作用，因为第一个孩子的内容具有无限宽度。

SizedBox(
  height: 300,
  width: 50,
  child: Container(
    color: Colors.black,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          child: Container(
            height: 100,
            color: Colors.red,
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
          ),
        ),
      ],
    ),
  ),
);

我想让第一个孩子（即文本字段）灵活，这样如果高度太小，就不会出现丑陋的黄黑色溢出条。

更新：

下图显示了我真正想做的事情，但它存在溢出问题，因为第一个孩子不灵活。

显示当我使用灵活时会发生什么。

我正在使用 AnimatedContainer 来更改高度。如果可能，我不喜欢使用 SizeTransition。

【问题讨论】：

你应该从第一个容器（红色的）中删除高度参数并将

@karimtarek 谢谢你的建议。我提供的代码是对我的问题的简单说明。我已经用我真正想要实现的适当示例更新了这个问题。

我想你只需要设置你父母Container的高度和宽度。 Expanded 总是在任何 Column 或 Row 上占用剩余空间（如果您当然不更改 flex 属性）

@RodolfoFranco 那也没用。我在 GitHub 上通过 here 发现了同样的问题。到目前为止，还没有关于这个主题的任何其他内容。这种行为并不意外，因为可以通过 rémi-rousselet 在this question. 上的回答来理解。

【参考方案1】：

只需将您的代码替换为下一个（弯曲比例可以调整到正确的）：

SizedBox(
  height: 300,
  width: 50,
  child: Container(
    color: Colors.black,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          flex:1
          child: Container(
            height: 100,
            color: Colors.red,
          ),
        ),
        Flexible(
          flex:10
          child: Container(
            color: Colors.blue,
          ),
        ),
      ],
    ),
  ),
);