Flutter中的分割线效果实现

Flutter中的分割线效果实现

• • 第一种：Divider(Double:height,Double:indent,color:color)
  • 第二种：DecoratedBox(decoration:BoxDecoration(Border:border))
  • 第三种：用Widget 阴影达到分割线的效果，一个Widget 效果不明显，当两个都有阴影的Widget 相邻的时候就达到的分割线的效果

第一种：Divider(Double:height,Double:indent,color:color)

1.height：分割线Widget的高，不是分割线本身效果的高,可以达到两个Widget 之间margin的效果
2.indent：分割线左边缩进长度
3.color：分割线的颜色
4.代码示例：

[Container( height: 65.0,),Divider(height: 1.0,indent: 60.0,color: Colors.red,),Container( height: 65.0, ),
],

第二种：DecoratedBox(decoration:BoxDecoration(Border:border))

1.新建一个不带child Widget 的装饰容盒子，只使用边框参数，相当于一个没有高度的空白盒子
2.代码示例

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

第三种：用Widget 阴影达到分割线的效果，一个Widget 效果不明显，当两个都有阴影的Widget 相邻的时候就达到的分割线的效果

Container(decoration: BoxDecoration(color: Colors.white, boxShadow: [BoxShadow(color: Colors.grey[300],),]
),

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！