颤动的垂直分隔线与其父级一样高

Question

Flutter社区：）

使用Flutter应用程序并通过UI小部件寻求帮助。

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

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

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

分隔线放置在Container> Row> Column-> Container内，分隔线的高度应为Column的高度。

如该图片的示例所示：

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

p.s。所有小部件都放置在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),
                ),
              ],
            ),
          ],
        ),
      ),

This is the result

如果您只需要在侧面使用一个简单的分隔线，我建议您在容器上添加边框，because documetnation for IntrinsicHeight表示调用起来很昂贵，因此请尽可能避免使用它。

Here you can read more about adding border to the Container.

Answer 2

您可以使用Container而不指定height，constraints容器也不会扩展以填充其父级的空间。

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

Answer 3

您可以使用扩展窗口小部件来使用父窗口小部件的完整高度。