如何在Flutter的Column小部件之间添加垂直分隔符？

Question

您好。

我在这个网站上搜索了如何在Flutter的Column中添加垂直分隔符？但是我没有找到什么有用的东西。

这是我想要的效果：

我已经创建了水平分隔符。但当我尝试创建一个垂直分隔符来分隔两个对象（文本|图像）时，我一无所获。

以下是代码：

Row(children: <Widget>[
                Expanded(
                  child: new Container(
                      margin: const EdgeInsets.only(left: 10.0, right: 20.0),
                      child: Divider(
                        color: Colors.black,
                        height: 36,
                      )),
                ),
                Text("OR"),
                Expanded(
                  child: new Container(
                      margin: const EdgeInsets.only(left: 20.0, right: 10.0),
                      child: Divider(
                        color: Colors.black,
                        height: 36,
                      )),
                ),
              ]),

上面的代码是用于水平方向的。

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
            VerticalDivider(
              color: Colors.red,
              width: 20,
            ),
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
          ],
        ),

我为实现竖直分隔线编写的代码失败了。

需要你的帮助，谢谢。

- Roman Traversine

---

使用Container小部件而不是VerticalDivider小部件。 - user4571931

好的，谢谢@AndroidTeam的建议。我会试一下的。 - Roman Traversine

运行得很好。非常感谢 :) - Roman Traversine

Answer 1

尝试替换

VerticalDivider(color: Colors.red, width: 20)

与

Container(height: 80, child: VerticalDivider(color: Colors.red))

- sunxs

Answer 2

试试这个：

IntrinsicHeight(
    child: new Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Text('Foo'),
    VerticalDivider(),
    Text('Bar'),
    VerticalDivider(),
    Text('Baz'),
  ],
))

- AnasSafi

---

这个可以工作，但代价很高，这个小部件可能会导致树的深度为O(N²)的布局。 - IgZiStO

这是唯一不需要手动指定高度的方法，所以我认为如果没有其他解决方案，值得一试。 - Tokenyet

Answer 3

点击这里查看答案。

这对我有用。 感谢@Android团队和@sunxs先生的帮助 :)

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
            Container(height: 80, child: VerticalDivider(color: Colors.red)),
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
            Container(height: 80, child: VerticalDivider(color: Colors.red)),
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
          ],
        ),

- Roman Traversine

Answer 4

你可以选择使用以下方法之一：

VerticalDivider(
thickness: 1,
color:Colors.black
            
),

或者

Container(
height: 30,
width: 1,
color: Colors.black

)

- F.K

Answer 5

最优的方法是将垂直分隔符放在SizedBox内部。

SizedBox(
 height: 80, 
 child: VerticalDivider(color: primaryColor),
)

- Omach

Answer 6

你可以尝试：

Container(
  color: Colors.grey,
  height: 30,
  width: 1,
),

它对我有用！:))

- Jason

---

请使用代码示例器{}，并将此Container（color：Colors.grey，height：30，width：1）放置在其中，以使您的答案对其他人更易读。谢谢。 - Sameera De Silva

Answer 7

VerticalDivider小部件允许开发者添加一个垂直线，覆盖可用的垂直空间，通常在行或列中。它有助于在用户界面的不同部分或组件之间创建清晰的区别，提供视觉分离，而无需额外的空白空间或边距。

VerticalDivider(
       color: Colors.white,
       width: 1.0,
),

演示

- Savan Gangani

---

感谢您为Stack Overflow社区做出的贡献。这可能是一个正确的答案，但如果您能提供代码的额外解释，让开发人员能够理解您的推理过程，那将非常有用。对于不太熟悉语法或难以理解概念的新开发人员来说，这尤其有帮助。您是否可以编辑您的答案，包含更多细节，以造福整个社区？ - Jeremy Caney

感谢您为Stack Overflow社区做出贡献。这可能是一个正确的答案，但如果您能提供代码的额外解释，让开发人员能够理解您的思路，那将非常有帮助。对于不太熟悉语法或难以理解概念的新开发人员来说，这尤其有用。您是否可以友好地[编辑]您的答案，以便为社区带来更多细节？ - undefined