Flutter通过Container实现时间轴效果
更新时间：2021年05月22日 09:32:15 作者：码农王真实
时间轴是前端UI经常用到的效果，本文讲解下Flutter如何通过Container实现，感兴趣的朋友可以了解下
时间轴是前端UI经常用到的效果，先看下效果图:
时间轴的特点
1、在列表中的高度不确定，高度取决于右侧 item 的高度
2、时间轴通常在第一个 item 中的样式和其他 item 中不同。
实现
一、借助 Container 中 decoration 属性，设置左侧的 border，可以实现时间轴高度随着 item 变化效果
Center(
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
// 设置 BoxDecoration 的 border, border 的高度就是 Container 的高度
border: Border(left: BorderSide(color: Colors.red)),
color: Color(0x11000000),
),
))
效果 (图中红线是 Container 左侧的 border，可以在这里扩展成 timeline) :
二、重写 BorderDirectional 中 paint 方法
BorderDirectional 中原来的 paint 方法，可以看出，设置不同的属性，会调用不同的绘制方法实现不同的效果，这里重新 paint 方法，实现时间轴的效果
paint 方法中参数
canvas ： 这个就是画布了，借助这个 canvas 可以随意实现各种效果
rect : Container 的范围大小
我们的 paint 方法实现，按照 UI 设计图，对应的位置画上圆和线就可以了
@override
void paint(Canvas canvas, Rect rect, {TextDirection? textDirection, BoxShape shape = BoxShape.rectangle, BorderRadius? borderRadius}) {
if (position != 1) {
canvas.drawLine(Offset(rect.left+margin + radius / 2, rect.top), Offset(rect.left +margin+ radius / 2, rect.bottom), _strokePaint());
canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius, _fillPaint());
canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius,_strokePaint());
} else {
canvas.drawLine(Offset(rect.left+margin + radius / 2, rect.top + radius * 2), Offset(rect.left+margin + radius / 2, rect.bottom), _strokePaint());
canvas.drawCircle(Offset(rect.left+margin + radius / 2, rect.top + radius * 2), radius, _fillPaint());
canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius, _strokePaint());
canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius / 2, _strokePaint());
}
}
最终效果
三、完整代码
class BorderTimeLine extends BorderDirectional {
int position;
BorderTimeLine(this.position);
double radius = 10;
double margin= 20;
Paint _paint = Paint()
..color = Color(0xFFDDDDDD)
..strokeWidth = 1;
@override
void paint(Canvas canvas, Rect rect, {TextDirection? textDirection, BoxShape shape = BoxShape.rectangle, BorderRadius? borderRadius}) {
if (position != 0) {
canvas.drawLine(Offset(rect.left+margin + radius / 2, rect.top), Offset(rect.left +margin+ radius / 2, rect.bottom), _strokePaint());
canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius, _fillPaint());
canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius,_strokePaint());
} else {
canvas.drawLine(Offset(rect.left+margin + radius / 2, rect.top + radius * 2), Offset(rect.left+margin + radius / 2, rect.bottom), _strokePaint());
canvas.drawCircle(Offset(rect.left+margin + radius / 2, rect.top + radius * 2), radius, _fillPaint());
canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius, _strokePaint());
canvas.drawCircle(Offset(rect.left +margin+ radius / 2, rect.top + radius * 2), radius / 2, _strokePaint());
}
}
Paint _fillPaint(){
_paint.color=Colors.white;
_paint.style=PaintingStyle.fill;
return _paint;
}
Paint _strokePaint(){
_paint.color=Color(0xFFDDDDDD);
_paint.style=PaintingStyle.stroke;
return _paint;
}
}
在 ListView 中的 item 中使用
Widget _buildItem(BuildContext c, int i) {
return Container(
width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(border: BorderTimeLine(i)),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [
Padding(padding: EdgeInsets.symmetric(vertical: 10)),
Divider(color: Colors.grey.shade300, thickness: 40),
Text("$i" * 6, style: TextStyle(color: Colors.black, fontSize: 16)),
Text("abc\n" * Random().nextInt(10)),
Padding(padding: EdgeInsets.symmetric(vertical: 10)),
]),
));
}
以上就是Flutter通过Container实现时间轴效果的详细内容，更多关于Flutter 实现时间轴效果的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了Android Activity打开后被应用快照遮住的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
在使用App的时候，首次登录都需要用户输入密码的，有些朋友为了安全起见密码设置的比较长，导致很多次密码都输入错误，严重影响了用户体验效果，下面通过本文给大家介绍Android程序开发之防止密码输入错误 密码明文显示功能，需要的朋友参考下2016-02-02
这篇文章主要介绍了Android编程实现长按Button按钮连续响应功能,涉及Android自定义按钮及事件响应操作相关技巧,需要的朋友可以参考下2017-01-01
Intent组件虽然不是四大组件,但却是连接四大组件的桥梁,学习好这个知识,也非常的重要,下面这篇文章主要给大家介绍了关于Android中Intent组件的相关资料,需要的朋友可以参考下2021-12-12
这篇文章主要为大家详细介绍了Android自定义倒计时按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
今天小编就为大家分享一篇关于Android开关控件Switch的使用案例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-03-03
这篇文章主要为大家详细介绍了android实现按钮获取焦点延迟加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
AndroidStduio3.0 使用gradle将module打包jar文件的方法
这篇文章主要介绍了AndroidStduio3.0 使用gradle将module打包jar文件的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了Android仿qq顶部消息栏效果,需要的朋友可以参考下2018-04-04
这篇文章主要为大家详细介绍了Android实现后台开启服务默默拍照功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
最新评论