Flutter - 如何创建遵循其父高度的流体/动态容器？

Posted 2023-02-23

【中文标题】Flutter - 如何创建遵循其父高度的流体/动态容器？

【英文标题】：Flutter - How to create fluid / dynamic container that follows it's parent height?

【发布时间】：2020-10-10 08:59:14

【问题描述】：

我想要一条具有 100% 父级高度的线，该线应具有跟随其父级高度的流动高度。父母的高度是动态的，因为每个内容都有自己的高度。就像在 Path 应用中一样。

这是我的应用程序，目前我将高度设置为常数，如何使其动态跟随它的父级高度？ ：

Container(
  width: 1,
  color: Colors. redAccent,
  height: 300, // <-- this height
)

【问题讨论】：

你能给我看一下代码示例吗？

这能回答你的问题吗？ The equivalent of wrap_content and match_parent in flutter?

在这种情况下使用 LayoutBuilder 应该可以工作。您可以从其约束中获取父级的 maxHeight 并使用该信息来确定红线高度。

使用 LayoutBuilder constraints.maxHeight 会抛出一个错误：```flutter：在 performLayout() 期间抛出了以下断言：flutter：BoxConstraints 强制一个无限的高度。颤振：这些无效约束由以下颤振提供给_RenderColoredBox的布局（）函数：函数，它可能计算了有问题的无效约束：颤振：RenderConstrainedBox.performLayout（包：flutter/src/rendering/proxy_box.dart：270：13 ) ```

Container( width: 1, color: Colors.redAccent, height: constraints.maxHeight, //

【参考方案1】：

尝试使用使用可用空间的扩展小部件。你只需要定义这里的可用空间是什么

Expanded(
          child: Container(
            color: Colors.amber,
            width: 100,
          ),
        ),

这里，如果你不把东西放在展开的顶部，它会占据整个屏幕 如果不在底部，它将到达屏幕底部。

它占用了整个可用空间。

【参考方案2】：

我通过添加容器和向左添加边框解决了这个问题:)

【讨论】：

我尝试了它并尝试了带有返回容器和高度的 layoutbuilder：constraint.maxheight * 0.5。它给错误无穷大它“引发了另一个异常：BoxConstraints 强制无限高度。”