Flutter按日期分组列表插件grouped_list_by_date的使用

Flutter按日期分组列表插件grouped_list_by_date的使用

Grouped List by Date

一个用于轻松按日期类别（如今天、昨天、本周、上周及更早）对项目进行分组的Flutter包。它简化了按日期分组展示列表的任务，非常适合需要根据时间范围显示内容的应用。

特性

• 按日期类别分组：今天、昨天、本周、上周及更早。
• 通过itemBuilder自定义项目渲染。
• 与StatefulWidget无缝集成，支持动态数据更新。
• 轻量级且易于使用。

开始使用

要在项目中使用此包，请将其添加到项目的pubspec.yaml文件中：

dependencies:
  grouped_list_by_date: ^0.1.2

然后运行以下命令以安装依赖：

flutter pub get

使用示例

以下是一个简单的示例，演示如何在Flutter应用中使用GroupedListByDate包：

import 'package:flutter/material.dart';
import 'package:grouped_list_by_date/grouped_list_by_date.dart';
import 'package:intl/intl.dart'; // 用于格式化日期

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: GroupedListExample(),
    );
  }
}

class GroupedListExample extends StatelessWidget {
  // 定义一组带日期的项目
  final List<Map<String, dynamic>> items = [
    {'name': '任务 1', 'date': DateTime.now()}, // 当前日期
    {'name': '任务 2', 'date': DateTime.now().subtract(const Duration(days: 1))}, // 昨天
    {'name': '任务 3', 'date': DateTime.now().subtract(const Duration(days: 3))}, // 前几天
    {'name': '任务 4', 'date': DateTime.now().subtract(const Duration(days: 8))}, // 上周
    {'name': '任务 5', 'date': DateTime.now().subtract(const Duration(days: 10))}, // 更早
  ];

  GroupedListExample({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('按日期分组列表'),
      ),
      body: GroupedListByDate(
        items: items, // 数据源
        itemCount: items.length, // 数据数量
        groupByParameter: 'date', // 按日期分组
        stickyHeader: true, // 粘性头部
        headingChild: (heading) => Padding(
          padding: const EdgeInsets.all(18.0),
          child: Text(
            heading,
            style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: Colors.white),
          ),
        ), // 自定义分组标题样式
        itemBuilder: (context, item) {
          return Card(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5)), // 卡片圆角
            child: ListTile(
              title: Text(item['name']), // 列表项标题
              subtitle: Text(DateFormat('dd MMM yyyy').format(item['date'])), // 列表项副标题（日期）
            ),
          );
        }, // 自定义列表项渲染
      ),
    );
  }
}