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