Flutter时间线节点管理插件timeline_node的使用

插件简介

timeline_node 是一个用于创建时间线布局的小部件。它可以帮助开发者轻松实现带有时间线节点的时间线展示功能。

截图

以下是该插件在 Android 设备上的截图：

使用示例

以下是一个完整的示例代码，展示了如何使用 timeline_node 插件来创建时间线节点管理。

import 'package:flutter/material.dart';
import 'package:timeline_node/timeline_node.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 应用程序的根小部件
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'timeline_node',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePageTimelineObject {
  final TimelineNodeStyle style;
  final String message;

  HomePageTimelineObject({this.style, this.message});
}

class HomePage extends StatefulWidget {
  final List<HomePageTimelineObject> timelineObject = [
    HomePageTimelineObject(
        message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        style: TimelineNodeStyle(lineType: TimelineNodeLineType.BottomHalf)),
    HomePageTimelineObject(
        message:
            'Maecenas non bibendum ante, et volutpat diam. Praesent eu interdum urna. Ut rhoncus, lectus sed condimentum dictum, dolor odio accumsan risus, eget malesuada enim lectus ut diam.',
        style: TimelineNodeStyle(
            lineType: TimelineNodeLineType.Full, lineColor: Colors.red)),
    HomePageTimelineObject(
        message:
            'Nullam tincidunt nunc libero, vel efficitur ex elementum quis. Nam non ex laoreet, imperdiet tellus vitae, finibus augue.',
        style: TimelineNodeStyle(
            lineType: TimelineNodeLineType.TopHalf, lineColor: Colors.green)),
    HomePageTimelineObject(
        message:
            'Ut fringilla dui posuere, lobortis mauris vitae, pretium ipsum.',
        style: TimelineNodeStyle(
            type: TimelineNodeType.Right,
            lineType: TimelineNodeLineType.BottomHalf,
            lineWidth: 5)),
    HomePageTimelineObject(
        message:
            'Ut fringilla dui posuere, lobortis mauris vitae, pretium ipsum.',
        style: TimelineNodeStyle(
            type: TimelineNodeType.Right,
            lineType: TimelineNodeLineType.Full,
            lineWidth: 5)),
    HomePageTimelineObject(
        message:
            'Praesent nulla sapien, vestibulum eget tincidunt ac, suscipit eget libero. Aliquam finibus sed nisi sed ornare.',
        style: TimelineNodeStyle(
            type: TimelineNodeType.Right,
            lineType: TimelineNodeLineType.TopHalf,
            lineWidth: 5)),
  ];

  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timeline Node Demo'),
      ),
      body: ListView.builder(
        itemCount: this.widget.timelineObject.length,
        itemBuilder: (context, index) {
          return TimelineNode(
            style: this.widget.timelineObject[index].style,
            indicator: SizedBox(
              width: 10,
              height: 10,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(5),
                child: Container(
                  color: Colors.black,
                ),
              ),
            ),
            child: Padding(
              padding: EdgeInsets.all(4),
              child: Card(
                child: Padding(
                  padding: EdgeInsets.all(16),
                  child: Text(this.widget.timelineObject[index].message),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

代码说明

1. 导入必要的库：

   import 'package:flutter/material.dart';
   import 'package:timeline_node/timeline_node.dart';
   

2. 定义数据模型：

   class HomePageTimelineObject {
     final TimelineNodeStyle style;
     final String message;
   
     HomePageTimelineObject({this.style, this.message});
   }
   

3. 主应用结构：

   void main() => runApp(MyApp());
   

4. 定义时间线对象列表：

   final List<HomePageTimelineObject> timelineObject = [
     HomePageTimelineObject(
         message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
         style: TimelineNodeStyle(lineType: TimelineNodeLineType.BottomHalf)),
     // 其他时间线对象...
   ];
   

5. 构建时间线节点：

   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text('Timeline Node Demo'),
       ),
       body: ListView.builder(
         itemCount: this.widget.timelineObject.length,
         itemBuilder: (context, index) {
           return TimelineNode(
             style: this.widget.timelineObject[index].style,
             indicator: SizedBox(
               width: 10,
               height: 10,
               child: ClipRRect(
                 borderRadius: BorderRadius.circular(5),
                 child: Container(
                   color: Colors.black,
                 ),
               ),
             ),
             child: Padding(
               padding: EdgeInsets.all(4),
               child: Card(
                 child: Padding(
                   padding: EdgeInsets.all(16),
                   child: Text(this.widget.timelineObject[index].message),
                 ),
               ),
             ),
           );
         },
       ),
     );
   }