前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >flutter实现分割线的三种方法

flutter实现分割线的三种方法

作者头像
徐建国
发布2021-08-03 15:12:16
6.3K0
发布2021-08-03 15:12:16
举报
文章被收录于专栏:个人路线个人路线

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

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

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

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

1.height:分割线Widget的高,不是分割线本身效果的高,可以达到两个Widget 之间margin的效果

2.indent:分割线左边缩进长度,可以很好的在一些场景下使用。

3.color:分割线的颜色 4.代码示例:

代码语言:javascript
复制
<Widget>[
 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.代码示例

代码语言:javascript
复制
DecoratedBox(
 decoration:BoxDecoration(
     border:Border.all(color: Colors.grey[200],width: 1.0)
    ),
),

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

代码语言:javascript
复制
Container(
 decoration: BoxDecoration(color: Colors.white, boxShadow: <BoxShadow>[
      BoxShadow(
          color: Colors.grey[300],
         ),
 ]
),

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-07-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 明天也要加油呀 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档