颤振垂直分隔线与其父级一样高答案

【问题标题】：Flutter vertical divider as tall as its parent颤振垂直分隔线与其父级一样高
【发布时间】：2019-02-06 08:42:03
【问题描述】：

你好 Flutter 社区：)

正在开发 Flutter 应用程序并寻求有关 UI 小部件的帮助。

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

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

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

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

如本图示例：

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

附言所有小部件都放置在 ListView 中

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

【问题讨论】：

用Container(decoration: ..)在左边添加彩色边框怎么样？
谢谢！现在将尝试实施。但是，根据服务器请求，至少会有 4 种不同的分隔线颜色。
“根据服务器请求，将至少有 4 种不同的分隔线颜色”不明白为什么这与分隔线有任何不同，并且不会导致任何问题。
感谢 Günter，它的工作原理就像一个魅力，虽然今天感觉有点像 hack。
你看过这个了吗：stackoverflow.com/questions/49388281/flutter-vertical-divider/…

标签： height flutter divider

【解决方案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.

【讨论】：

【解决方案2】：

您可以使用扩展小部件来使用父小部件的全高。

【讨论】：

【解决方案3】：

你应该首先确定你的 listtile 中有多少项目之后你就可以使用这个了

你可以用这个容器画一条线

for (var i in yourItem) Dividers(i),

Container Dividers(Map<String, dynamic> changes) {
  return Container(
    decoration: BoxDecoration(
      border: Border(
        top: BorderSide(width: 30, color: Colors.blue),
        bottom: BorderSide(width: 30, color: Colors.blue),
      ),
      color: Colors.white,
    ),
    margin: EdgeInsets.only(left: 22),
    width: 2,
  );
}

【讨论】：

【解决方案4】：

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

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

【讨论】：

这是可能的，但分隔线只有高度参数，但通过旋转到垂直它可能会起作用。