Flutter学习笔记：ListView添加一条分割线
前言部分
年底有点时间，开始学习一下Flutter的常规布局啥的，今天主要讲一下给ListView添加一条分割线，其实很简单的需求，但是我还是花了一些时间，所以特此做个记录。
内容部分
我们可以通过系统提供的方法添加，代码如下：
var divideListItem = ListTile.divideTiles(
tiles: itemList, context: context, color: Colors.pink)
.toList();
参数主要是第一个，就是我们的ListView的item，其实源码内部主要就是对我们的item做了一层包装然后在返回集合而已。下面是源码部分：
static Iterable divideTiles({ BuildContext context, @required Iterable tiles, Color color }) sync* {
assert(tiles != null);
assert(color != null || context != null);
final Iterator iterator = tiles.iterator;
final bool isNotEmpty = iterator.moveNext();
final Decoration decoration = BoxDecoration(
border: Border(
bottom: Divider.createBorderSide(context, color: color),
),
);
Widget tile = iterator.current;
while (iterator.moveNext()) {
yield DecoratedBox(
position: DecorationPosition.foreground,
decoration: decoration,
child: tile,
);
tile = iterator.current;
}
if (isNotEmpty)
yield tile;
}
方法通过BoxDecoration来包装我们的item，在通过Divider来返回一条Widget并且添加到BoxDecoration底部就可以了。
这时候我们想让我们的分割线变得粗一些怎么办呢？
通过上面的源码我们发现想让线变只要在创建线的时候做一点小改动就好了，所以看一下createBorderSide方法，源码如下：
static BorderSide createBorderSide(BuildContext context, { Color color, double width = 0.0 }) {
assert(width != null);
return BorderSide(
color: color ?? Theme.of(context).dividerColor,
width: width,
);
}
可以发现BorderSide这个Widget是真正创建线的地方，所以看一下控制高度的参数（其实这里传入了width，我猜想这个应该就是控制高度的参数了），源码如下：
/// Creates the side of a border.
///
/// By default, the border is 1.0 logical pixels wide and solid black.
const BorderSide({
this.color = const Color(0xFF000000),
this.width = 1.0,
this.style = BorderStyle.solid,
})
看到注释似乎你就明白了，默认的宽度是1.0，如果我们需要控制的话，传入个参数就行了。
所以上面说了一堆，结论就是我们传入一个宽度就可以控制分割线的宽度了
static Iterable divideTiles({ BuildContext context, @required Iterable tiles, Color color }) sync* {
//省略代码
final Decoration decoration = BoxDecoration(
border: Border(
//这里控制一下参数就好了
bottom: Divider.createBorderSide(context, color: color, width: 5),
),
);
//省略代码
}
总结部分
写了两天flutter的小demo，发现这个东西写起来确实很快（写一个效果代码很少），前提是你对这些东西很熟悉。
至少我觉得比RN写起来要简单很多，如果要做混合项目的话，我个人觉得这个还是很有优势的。