如何在Flutter中的列上的Widget之间添加垂直分隔符?

问题描述 投票:2回答:2

美好的一天。

我在这个网站上浏览如何在Flutter中的Widget上添加一个垂直分隔符?但我一无所获。

这就是我想要的enter image description here

我已经制作了水平分隔线。但是当我尝试制作一个分隔2个物体(文字图像)的垂直分隔线时,我什么也没得到。

这是代码:

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制作。但失败了。

需要你的帮助。谢谢

android flutter separator divider
2个回答
7
投票

尝试更换

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

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

0
投票

在这里答案。

这个对我有用。谢谢你@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),)
              ],
            ),
          ],
        ),
© www.soinside.com 2019 - 2024. All rights reserved.