Flutter时间轴(timeline)
组件在业务开发中经常会使用到timeline时间轴,来记录数据操作记录等,在这本人封装了一个相对较通用的时间轴组件。示例参数参数类型必填说明timelineListList是时间轴数据lineColorColor是时间轴轴线颜色heightdouble否时间轴右侧容器高度(默认80)titleStyleTextStyle否时间轴标题样式(已定义初始值 如无特殊样式无需传参)subtitleStyl
·
组件
在业务开发中经常会使用到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,
)
源码地址: https://github.com/gongchenghuigch/flutterComponent/tree/main/timeline
更多推荐
已为社区贡献4条内容
所有评论(0)