timeline_list下載timeline_list源代碼下載

timeline_list

網站數據

1.0.0

下載

飄動的時間軸小部件

一個高度可定制的繪製小部件，用於顯示具有自定義標記，圖標和靈活定位選項的垂直時間表。

飄動的時間軸列表屏幕截圖

警告

？該文檔是使用LLMS創建的。如果您注意到任何錯誤或錯別字，請提交拉動請求或創建問題。

特徵

三個時間軸位置： start （左）， center或end （右）
？具有任何窗口小部件作為內容或圖標的完全可定制標記
？靈活的圖標對齊： top ， center或標記bottom
集中時間表的單個標記定位
支持反向時間軸訂單
自定義滾動物理和控制器支持

安裝

將其添加到包裝的pubspec.yaml文件中：

 dependencies :
  timeline_list : ^0.1.0

用法

簡單的時間表

顫音簡單的時間表列表屏幕快照

 import 'package:timeline_list/timeline_list.dart' ;

Timeline (
  children : [
    Marker (child : Text ( "Step 1" )),
    Marker (child : Text ( "Step 2" )),
    Marker (child : Text ( "Step 3" ))
  ],
)

入職示例

這是一個更高級的示例，顯示具有自定義圖標的入職時間軸：

Flutter入職時間軸列表屏幕快照

 var checkIcon = Container (
    width : 16 ,
    height : 16 ,
    decoration : BoxDecoration (shape : BoxShape .circle, color : Colors .green),
    child : Icon ( Icons .check, color : Colors .white, size : 12 ));
var emptyIcon = Container (
    width : 16 ,
    height : 16 ,
    decoration : BoxDecoration (shape : BoxShape .circle, color : Colors .grey));
return Scaffold (
    appBar : AppBar (title : const Text ( "Onboarding example" )),
    body : Column (children : [
      Timeline . builder (
        context : context,
        markerCount : 10 ,
        properties : TimelineProperties (
            iconAlignment : MarkerIconAlignment .center,
            iconSize : 16 ,
            timelinePosition : TimelinePosition .start),
        markerBuilder : (context, index) => Marker (
          child : Padding (
            padding : const EdgeInsets . all ( 8.0 ),
            child : Text ( "Step ${ index + 1 }" ),
          ),
          icon : index >= 8 ? emptyIcon : checkIcon,
          position : MarkerPosition .left,
        ),
      ),
    ]));