如何在 Flutter 中的 Column 上的 Widget 之间添加垂直分隔线？

Posted 2023-02-24

【中文标题】如何在 Flutter 中的 Column 上的 Widget 之间添加垂直分隔线？

【英文标题】：How to add a Vertical Divider between Widget on Column in Flutter?

【发布时间】：2019-08-29 06:36:36

【问题描述】：

美好的一天。

我在这个网站上浏览过但我一无所获。

这里有我想要的

我已经做了水平分隔线。但是当我尝试制作一个分隔两个对象（文本|图像）的垂直分隔线时，我什么也没得到。

代码如下：

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

我为垂直分隔线制作的代码。但失败了。

需要你的帮助， 谢谢。

【问题讨论】：

使用容器代替 VerticalDivider 小部件

ok 谢谢@androidTeam 的建议。我会绑定的。

效果很好。 arigatou gozaimasu :)

【参考方案1】：

尝试替换

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

与

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

【参考方案2】：

在这里找到答案。

它对我有用。 感谢@Android Team 先生和@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),)
              ],
            ),
          ],
        ),

【参考方案3】：

试试这个：

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

【讨论】：

这可行，但成本可能很高，此小部件可能会导致树深度为 O(N²) 的布局。

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

【参考方案4】：

你可以试试：

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

它对我有用！ :))

【讨论】：

使用代码采样器 并将这个容器（颜色：Colors.grey，高度：30，宽度：1，）放入其中，这样您的答案对其他人来说更具可读性。谢谢。

【参考方案5】：

你可以使用

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

或

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

)

【参考方案6】：

最理想的方法是将垂直分隔线放在 SizedBox 中。

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