如何在 Flutter 中的列上的小部件之间添加垂直分隔线?
How to add a Vertical Divider between Widget on Column in Flutter?
美好的一天。
我在这个网站上浏览过如何在 Flutter 中的列上的 Widget 之间添加垂直分隔线?但我一无所获
这是我想要的
我已经制作了水平分隔线。但是当我尝试制作一个分隔 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),)
],
),
],
),
上面的代码是我为垂直分隔线制作的。但失败了。
需要你的帮助,
谢谢。
尝试替换
VerticalDivider(color: Colors.red, width: 20)
和
Container(height: 80, child: VerticalDivider(color: Colors.red))
这里是答案。
对我有用。
谢谢@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),)
],
),
],
),
试试这个:
IntrinsicHeight(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Foo'),
VerticalDivider(),
Text('Bar'),
VerticalDivider(),
Text('Baz'),
],
))
你可以试试:
Container(
color: Colors.grey,
height: 30,
width: 1,
),
它对我有用! :))
您可以使用
VerticalDivider(
thickness: 1,
color:Colors.black
),
或
Container(
height: 30,
width: 1,
color: Colors.black
)
最佳方式是将 Vertical Divider 放在 SizedBox 中。
SizedBox(
height: 80,
child: VerticalDivider(color: primaryColor),
)
美好的一天。
我在这个网站上浏览过如何在 Flutter 中的列上的 Widget 之间添加垂直分隔线?但我一无所获
这是我想要的
我已经制作了水平分隔线。但是当我尝试制作一个分隔 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),)
],
),
],
),
上面的代码是我为垂直分隔线制作的。但失败了。
需要你的帮助, 谢谢。
尝试替换
VerticalDivider(color: Colors.red, width: 20)
和
Container(height: 80, child: VerticalDivider(color: Colors.red))
这里是答案。
对我有用。 谢谢@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),)
],
),
],
),
试试这个:
IntrinsicHeight(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Foo'),
VerticalDivider(),
Text('Bar'),
VerticalDivider(),
Text('Baz'),
],
))
你可以试试:
Container(
color: Colors.grey,
height: 30,
width: 1,
),
它对我有用! :))
您可以使用
VerticalDivider(
thickness: 1,
color:Colors.black
),
或
Container(
height: 30,
width: 1,
color: Colors.black
)
最佳方式是将 Vertical Divider 放在 SizedBox 中。
SizedBox(
height: 80,
child: VerticalDivider(color: primaryColor),
)