Flutter中如何实现分隔线

Flutter中如何实现横向分隔线

实现横向分隔线，可以用以下3种方法：

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

2. DecoratedBox(decoration:BoxDecoration(Border:border))
   新建一个不带child Widget 的装饰容盒子，只使用边框参数，相当于一个没有高度的空白盒子。

DecoratedBox(
 decoration:BoxDecoration(
     border:Border.all(color: Colors.grey[200],width: 1.0)
    ),
)，

3. 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('关闭'),
        )
      ],
    );