Flutter 垂直分隔线与其父级一样高

Question

嗨，Flutter 社区:)

开发 flutter 应用程序并寻求 UI 小部件的帮助。

我不知道如何根据父母的身高设置孩子的身高。

需要创建一个垂直分隔线（或具有自定义高度的容器）并将其高度设置为其父级的最大值，因为父级高度（在我的例子中是一列）将根据内部小部件而变化。

我找到了创建垂直分隔线但高度固定的方法。尝试使用 BoxFit、BoxConstraints、FittedBox 和其他几种方法，但未能设置父级的高度。

分隔线放置在容器>行>列->容器内，分隔线的高度应该是列的高度。

如下图所示：

https://i.stack.imgur.com/uUWjF.png

ps 所有小部件都放置在 ListView 内

      Column(
         children: <Widget>[
            Container(
              color: Colors.blue,
              width: 5.0,
              //height: -> setting to maximum of its parent
            ),
          ],
        ),

Answer 1

您可以为此使用 IntrinsicHeight。

在本示例中，我使用 Container 作为分隔线，因为我的分隔线需要边框半径，但您也可以使用 VerticalDivider。

IntrinsicHeight(
        child: Row(
          children: <Widget>[
            // This is your divider
            Container(
              width: 3,
              height: double.infinity,
              color: Colors.blue,
              margin: const EdgeInsets.only(right: 4),
            ),
            Column(
              children: <Widget>[
                Text(
                  'Text 1',
                  style: TextStyle(fontSize: 20),
                ),
                Text(
                  'Text 2',
                  style: TextStyle(fontSize: 20),
                ),
                Text(
                  'Text 3',
                  style: TextStyle(fontSize: 20),
                ),
              ],
            ),
          ],
        ),
      ),

这是结果

如果您只需要在侧面有一个简单的分隔线，我建议您向容器添加边框，因为 IntrinsicHeight 的文档说调用起来很昂贵，所以尽可能避免使用它。

在这里您可以阅读有关向容器添加边框的更多信息。

编辑：2022 年 8 月 25 日。

Flutter 官方频道视频讲解 Intrinsic widgets

Answer 2

您可以使用 aContainer并且不指定height容器constraints将扩展以填充其父级中的空间。

Container(
    child: Divider(
        width: 5.0, 
        color: Colors.blue,
    )
)