Flutter时间线列表插件list_timeline的使用

Flutter时间线列表插件list_timeline的使用

该插件用于在iOS、Android、Windows和Web平台上创建一个简单的跟踪小部件。

使用

要使用此插件，将list_timeline添加为您的pubspec.yaml文件中的依赖项。

示例

以下是一个简单的示例，展示如何使用list_timeline插件来创建一个时间线列表。

import 'package:example/data_model.dart'; // 假设你已经有一个数据模型类
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:list_timeline/custom_list_tracking.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List Timeline',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<DataModel> listExample = [];

  @override
  void initState() {
    // 初始化数据列表
    listExample.add(DataModel(
        title: "批准",
        desc: "此任务已由经理批准",
        dateTime: DateTime(2022, 08, 10)));

    listExample.add(DataModel(
        title: "警告",
        desc: "此任务收到经理的黄色通知",
        dateTime: DateTime(2022, 08, 12)));

    listExample.add(DataModel(
        title: "拒绝",
        desc: "此任务被经理拒绝",
        dateTime: DateTime(2022, 08, 23)));
    super.initState();
  }

  // 日期格式化函数
  String _dateFormat(DateTime date) {
    return DateFormat("dd/MM/yyyy").format(date);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("时间线列表使用"),
      ),
      // 这些代码展示了如何使用该包
      // 如果你想自定义小部件，可以找到以下属性：
      // 1. customLeftWidget: (e) => Container(),
      // 2. customTitleWidget: (e) => Container(),
      // 3. customDescWidget: (e) => Container(),
      
      body: Container(
          margin: const EdgeInsets.all(10),
          child: CustomListTracking<DataModel>(
            listItem: listExample,
            valueTextOfTitle: (e) => e.title!,
            valueTextOfDesc: (e) => e.desc!,
            colorCircleTimeline: (e) =>
              e.title == "警告" ? Colors.yellow : e.title == "拒绝"
                  ? Colors.red
                  : Colors.blue,
            showLeftWidget: true,
            valueOfLeftSource: (e) => _dateFormat(e.dateTime!),
          )),
    );
  }
}

自定义小部件

如果你想要自定义时间线列表中的各个部分（如左侧小部件、标题小部件、描述小部件），可以通过以下方式实现：

CustomListTracking<DataModel>(
  listItem: listExample,
  valueTextOfTitle: (e) => e.title!,
  valueTextOfDesc: (e) => e.desc!,
  colorCircleTimeline: (e) =>
    e.title == "警告" ? Colors.yellow : e.title == "拒绝"
        ? Colors.red
        : Colors.blue,
  showLeftWidget: true,
  customLeftWidget: (e) => Column(
    children: [
      Text(_dateFormat(e.dateTime!)), // 显示日期
      Text(e.title!), // 显示标题
    ],
  ),
  valueOfLeftSource: (e) => _dateFormat(e.dateTime!),
)

更多关于Flutter时间线列表插件list_timeline的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter时间线列表插件list_timeline的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用list_timeline插件来创建一个时间线列表的示例代码。首先，你需要确保在pubspec.yaml文件中添加了对list_timeline的依赖：

dependencies:
  flutter:
    sdk: flutter
  list_timeline: ^最新版本号  # 请替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

以下是一个完整的示例代码，展示了如何使用list_timeline插件：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Timeline List Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TimelinePage(),
    );
  }
}

class TimelinePage extends StatelessWidget {
  final List<TimelineEvent> events = [
    TimelineEvent(
      date: DateTime(2023, 10, 1),
      title: 'Event 1',
      description: 'This is the description for event 1.',
    ),
    TimelineEvent(
      date: DateTime(2023, 10, 5),
      title: 'Event 2',
      description: 'This is the description for event 2.',
    ),
    TimelineEvent(
      date: DateTime(2023, 10, 10),
      title: 'Event 3',
      description: 'This is the description for event 3.',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timeline List Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListTimeline(
          events: events,
          onEventTap: (TimelineEvent event) {
            // 可以在这里处理事件点击
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('You tapped on ${event.title}'),
              ),
            );
          },
          dateBuilder: (BuildContext context, DateTime date) {
            return Text(
              DateFormat('MMMM d, yyyy').format(date),
              style: TextStyle(fontWeight: FontWeight.bold),
            );
          },
          eventBuilder: (BuildContext context, TimelineEvent event, int index) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(event.title, style: TextStyle(fontSize: 18)),
                SizedBox(height: 8),
                Text(event.description, style: TextStyle(color: Colors.grey)),
              ],
            );
          },
        ),
      ),
    );
  }
}

class TimelineEvent {
  final DateTime date;
  final String title;
  final String description;

  TimelineEvent({required this.date, required this.title, required this.description});
}

在这个示例中：

  1. 我们定义了一个TimelineEvent类来存储每个事件的日期、标题和描述。
  2. 在TimelinePage中，我们创建了一个包含三个事件的列表。
  3. 使用ListTimeline小部件来显示时间线列表。
  4. 自定义了dateBuilder和eventBuilder来分别构建日期和事件的UI。
  5. 添加了onEventTap回调来处理事件的点击事件。

请确保你已经导入了package:intl/intl.dart来使用DateFormat格式化日期。如果没有导入，可以在文件顶部添加以下导入语句：

import 'package:intl/intl.dart';

这个示例提供了一个基本的使用list_timeline插件的方法，你可以根据实际需求进一步自定义和扩展。

回到顶部