Flutter自定義時間軸timeline

淺夏晴空發表於2021-11-12
Flutter

元件

在業務開發中經常會使用到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...

相關文章