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,
)

源码地址： https://github.com/gongchenghuigch/flutterComponent/tree/main/timeline