Flutter自定义时间轴timeline

浅夏晴空
English

组件

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

示例

参数

参数类型必填说明
timelineListList时间轴数据
lineColorColor时间轴轴线颜色
heightdouble时间轴右侧容器高度(默认80)
titleStyleTextStyle时间轴标题样式(已定义初始值 如无特殊样式无需传参)
subtitleStyleTextStyle时间轴副标题颜色 如果List数据不包含subtitle参数则不展示
descriptionStyleTextStyle时间轴描述样式
leftContentbool时候展示左侧时间 true-展示 false-不展示 默认true

timelineList

参数类型说明
titleString标题数据
subtitleString副标题数据
descriptionString描述(如果remark不为空不展示)
remarkString备注 展示成气泡形式
dayString左侧时间栏天 如 09-20
timeString左侧时间了时间 如 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/gongchengh...

阅读 2.3k

大前端技术栈
大前端技术汇总

基于大前端端技术的一些探索反思总结及讨论

4.9k 声望
3.5k 粉丝
0 条评论

基于大前端端技术的一些探索反思总结及讨论

4.9k 声望
3.5k 粉丝
文章目录
宣传栏