Flutter自定义时间轴timeline Flutter自定义时间轴timeline

组件在业务开发中经常会使用到timeline时间轴，来记录数据操作记录等，在这本人封装了一个相对较通用的时间轴组件。
示例
文章图片

参数

参数	类型	必填	说明
timelineList	List	是	时间轴数据
lineColor	Color	是	时间轴轴线颜色
height	double	否	时间轴右侧容器高度（默认80）
titleStyle	TextStyle	否	时间轴标题样式（已定义初始值如无特殊样式无需传参）
subtitleStyle	TextStyle	否	时间轴副标题颜色如果List数据不包含subtitle参数则不展示
descriptionStyle	TextStyle	否	时间轴描述样式
leftContent	bool	否	时候展示左侧时间 true-展示 false-不展示默认true

timelineList

参数	类型	说明
title	String	标题数据
subtitle	String	副标题数据
description	String	描述（如果remark不为空不展示）
remark	String	备注展示成气泡形式
day	String	左侧时间栏天如 09-20
time	String	左侧时间了时间如 11:40

调用示例

import '@/timeline/timeline.dart'; final list = [ { 'day': '07-08', 'time': '13:20', 'remark': "备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑", 'description': '', 'subtitle': '齐本安(主播)', 'title': "新建工单" }, { 'id': "2", 'day': '07-08', 'time': '13:20', 'description': "备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑", 'subtitle': '吴雄飞(销售专员)', 'title': "联系客户" }, { 'id': "3", 'day': '07-08', 'time': '13:20', 'description': "备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑，辛苦再撮合", 'title': "新建工单" }, { 'id': "4", 'day': '07-08', 'time': '13:20', 'description': "备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑，辛苦再撮合备注：降价1000客户可考虑，辛苦再撮合", 'subtitle': '齐本安(主播)', 'title': "新建工单" }, { 'id': "5", 'day': '07-08', 'time': '13:20', 'description': "备注：降价1000客户可考虑", 'subtitle': '吴雄飞(主播)', 'title': "新建工单" } ]; TimelineComponent( timelineList: list, lineColor: WBColors.color_cccccc, leftContent: false, height: 80.0, )

【Flutter自定义时间轴timeline】源码地址： https://github.com/gongchengh...