Question

美好的一天。

我已经在该网站上浏览了有关如何在Flutter中的列上的小部件之间添加垂直分隔线的信息？但我什么也没得到。

这是我想要的

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

代码如下：

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

上面的

我为Vertical Divider做的代码。但失败了。

需要您的帮助。谢谢

Answer 1

尝试更换

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

使用

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

Answer 2

尝试一下：

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

Answer 3

你可以使用

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

或

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

)

Answer 4

在这里找到答案。

对我有用。谢谢@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),)
              ],
            ),
          ],
        ),

Answer 5

你可以试试：

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

它对我有用！ :))

如何在Flutter中的列上的小部件之间添加垂直分隔线？

5 个答案: