垂直分隔线未显示

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

- Burak

---

我进行了测试，一切正常。 - Hussnain Haidar

展示你的整个小部件或一些父级小部件。 - Hussnain Haidar

我更新了问题。您可以在Github Gist中查看整个内容。 - Burak

Answer 1

请使用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)),)
    ],
  ),
)

- Crazy Lazy Cat

---

可以。为什么需要使用IntrinsicHeight包裹呢？ - Hussnain Haidar

我不确定。它会强制将同一行的所有子元素设置为合理的高度。 - Crazy Lazy Cat

它可以工作，但我宁愿使用容器（而不是VerticalDivider）而不是添加另一个包装小部件。 - TGLEE

IntrinsicHeight 构建起来开销较大，因此请谨慎使用，并仅在没有其他解决方案时使用。在这种情况下，简单的容器即可解决问题。 https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html - Sangam

谢谢Sangam，是的它很昂贵，因为它的最坏情况是“O（N ^ 2）”，感谢您分享资源！ - An Android

Answer 2

垂直分割线需要设置高度才能正常工作，建议使用SizedBox或等效组件，并定义高度参数。

示例：

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

- Emanoel Vieira

Answer 3

您还可以将Row与指定高度的Container包装在一起。

- Олександр Бабіч

---

展示完整上下文。 - Олександр Бабіч

我给SizedBox()设置了固定高度，将垂直分隔符添加为子元素，但没有输出，仍然存在相同的问题。 - Muhammad Faizan

奇怪。再次展示完整的代码以查看发生了什么。 - Олександр Бабіч

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

- dhaval_nakum

Answer 5

当您在行（Row）或包裹（Wrap）小部件中添加垂直分隔线时，由于高度不同可能无法显示。这主要是因为行/包裹小部件的父小部件高度不受限制所致。因此，请使用固定高度，如容器（Container）或IntrinsicHeight。

- Musfiq Shanta

Answer 6

使用高度为的SizedBox()包装VerticalDivider()

这个方法不起作用：

VerticalDivider(
width: 20,
thickness: 1,
color: Colors..teal
),
  

这有效：

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

- Abdullah Opadeji

---

请将文本从英语翻译成中文。只返回翻译后的文本内容：/help/formatting - starball