垂直分隔线未显示

Question

我正在尝试使用

VerticalDivider

小部件来分隔

Row

中的项目。 这里是全身。

行：

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)),)
  ],
),

Answer 1

用

Row

,

 包裹你的 

IntrinsicHeight

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)),)
    ],
  ),
)

Answer 2

VerticalDivider 需要高度才能正常工作，请将其与 SizedBox 或定义了高度参数的等效项一起使用。

示例：

SizedBox(
   height: 40
   child: VerticalDivider(
      thickness: 2,
      width: 20,
      color: Colors.black,
   ),
)

Answer 3

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

Answer 4

用

row

包裹您的

IntrinsicHeight

或指定

row

小部件的某个高度

IntrinsicHeight示例：

IntrinsicHeight(
  child: Row(
    children: const [
      YourWidget1(),
      VerticalDivider(
        color: Colors.red,
      ),
      YourWidget2()
    ],
  ),
),

具有固定高度的示例：

SizedBox(
  height: 40,
  child: Row(
    children: const [
      YourWidget1(),
      VerticalDivider(
        color: Colors.red,
      ),
      YourWidget2()
    ],
  ),
),

Answer 5

当您在 Row、Wrap 小部件中添加 Vertical Divider 时，由于高度不同，它可能无法显示。造成这个原因的主要原因是 Row/Wrap 小部件的父小部件的高度不受限制。 因此，请使用固定高度，例如 Container 或 IntrinsicHeight

Answer 6

用

VerticalDivider

包裹

SizedBox

并指定高度

这有效：

SizedBox(
  height: 200,
  child: VerticalDivider(
    width: 20,
    thickness: 1,
    color: Colors..teal
  ),
)