flutter实现分割线的三种方法

您所在的位置:网站首页 竖着的分割线 flutter实现分割线的三种方法

flutter实现分割线的三种方法

2023-10-01 02:52| 来源: 网络整理| 查看: 265

flutter在目前来说 ,由于其跨平台,得到了许多人的 青睐!

flutter中经常会遇到要实现分割线效果,以达到层级效果,那么,今天他来了。

我用到的主要有以下三种,

第一种: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))

不仅仅是在container中

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

以上就是我用到的三种方法,你呢?



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3