垂直分隔线未显示答案

【问题标题】：Vertical Divider not showing垂直分隔线未显示
【发布时间】：2020-05-14 12:59:48
【问题描述】：

我正在尝试使用VerticalDivider 小部件来分隔Row 中的项目。 Here 是全身。

行：

Row(
  children: <Widget>[
    Text('420 Posts', style: TextStyle(color: Color(0xff666666)),),
    VerticalDivider(
      thickness: 2,
      width: 20,
      color: Colors.black,
    ),
    Text('420 Posts', style: TextStyle(color: Color(0xff666666)),)
  ],
),

【问题讨论】：

我测试了，显示正常。
显示您的整个小部件或一些父小部件。
我更新了问题。你可以在 Github Gist 中看到整个身体。

标签： flutter flutter-layout

【解决方案1】：

您还可以将 Row 包装到具有指定高度的 Container 中。

【讨论】：

显示完整上下文
我给 SizedBox() 提供了固定高度，添加了垂直分隔线作为子级，没有输出，同样的问题
很奇怪。同样，显示完整代码以查看发生了什么。

【解决方案2】：

用IntrinsicHeight包裹你的Row，

IntrinsicHeight(
  child: Row(
    children: <Widget>[
      Text('420 Posts', style: TextStyle(color: Color(0xff666666)),),
      VerticalDivider(
        thickness: 2,
        width: 20,
        color: Colors.black,
      ),
      Text('420 Posts', style: TextStyle(color: Color(0xff666666)),)
    ],
  ),
)

【讨论】：

那行得通。我想知道为什么我们需要用 IntrinsicHeight 包装。
我不确定。它迫使所有孩子排成合理的高度。
而在最新的 Flutter SDK (Channel stable, v1.12.13+hotfix.5) 中，垂直分隔线实际上试图获得最大高度。所以我根本没有得到这个问题。
它有效，但我宁愿只使用容器（而不是 VerticalDivider）而不是添加另一个包装小部件..
IntrinsicHeight 的构建成本很高，所以要小心，只有在没有其他解决方案时才使用。在这种情况下，简单的容器就可以了。 api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html