flutter实现分割线的三种方法

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

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

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

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

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

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

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

<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.代码示例

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

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

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

以上就是我用到的三种方法，你呢？

最后
这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》，从编程语言到项目实战，一条龙服务！！

《Flutter Dart 语言编程入门到精通》

• 第一章 Dart语言基础

• 第二章 Dart 异步编程
  

• 第三章 异步之 Stream 详解

• 第四章 Dart标准输入输出流
  

• 第五章 Dart 网络编程

• 第六章 Flutter 爬虫与服务端
  

• 第七章 Dart 的服务端开发

• 第八章 Dart 调用C语言混合编程

• 第九章 LuaDardo中Dart与Lua的相互调用
  

《Flutter实战：第二版》

• 第一章：起步
• 第二章：第一个Flutter应用
• 第三章：基础组件
• 第四章：布局类组件
• 第五章：容器类组件

• 第六章：可滚动组件

• 第七章：功能型组件

• 第八章：事件处理与通知

• 第九章：动画

• 第十章：自定义组件
  

• 第十一章：文件操作与网络请求

• 第十二章：Flutter扩展

• 第十三章：国际化

• 第十四章：Flutter核心原理

• 第十五章：一个完整的Flutter应用
  

有需要学习资料的朋友扫描下方二维码即可免费领取！！！