Flutter中如何实现分隔线
Flutter中如何实现横向分隔线
实现横向分隔线,可以用以下3种方法:
- Divider(Double:height,Double:indent,color:color)
(1).height:分割线Widget的高,不是分割线本身效果的高,可以达到两个Widget 之间margin的效果
(2).indent:分割线左边缩进长度,可以很好的在一些场景下使用。
(3).color:分割线的颜色
<Widget>[
Container( height: 65.0,),
Divider(height: 1.0,indent: 60.0,color: Colors.red,),
Container( height: 65.0, ),
],
- DecoratedBox(decoration:BoxDecoration(Border:border))
新建一个不带child Widget 的装饰容盒子,只使用边框参数,相当于一个没有高度的空白盒子。
DecoratedBox(
decoration:BoxDecoration(
border:Border.all(color: Colors.grey[200],width: 1.0)
),
),
- Widget 阴影
用Widget 阴影达到分割线的效果,一个Widget 效果不明显,当两个都有阴影的Widget 相邻的时候就达到的分割线的效果
Container(
decoration: BoxDecoration(color: Colors.white, boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey[300],
),
]
),
Flutter中如何实现竖向分隔线
主要是利用DecoratedBox的decoration属性:
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
FlatButton(
child: Text('打开'),
),
//垂直分割线
SizedBox(
width: 1,
height: 12,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.grey),
),
),
FlatButton(
child: Text('关闭'),
)
],
);