Flutter分组列表插件z_grouped_list的使用

Flutter分组列表插件z_grouped_list的使用

特性

• 支持列表视图和网格视图。
• 可以将数据分成不同的组。
• 可以按升序或降序排列数据。
• 每个组可以有唯一的头部。

安装

在你的 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  z_grouped_list: <最新版本>

然后在 Dart 代码中导入它：

import 'package:z_grouped_list/z_grouped_list.dart';

使用方法

重要提示！请确保你的代码被 Expanded 或 SizedBox 包裹。

简单列表实现：

ZGroupedList(
  // 你的项目列表
  items: books,
  // 你要根据什么元素进行排序？
  sortBy: (item) {
    int year = item['year'];
    return year;
  },
  // 项目小部件
  itemBuilder: (context, item) {
    String? name = item['name'];
    return Text(name ?? "empty"); // 如果 name 为空则显示 "empty"
  },
  // 组分隔符小部件
  groupSeparatorBuilder: (year) {
    return Text(year.toString());
  },
),

网格列表实现：

ZGroupedList.grid(
  // 每行显示3个项目
  crossAxisCount: 3,

  // 所有的项目列表
  items: books,
  // 你要根据什么元素进行排序？
  sortBy: (item) {
    int year = item['year'];
    return year;
  },
  // 项目小部件
  itemBuilder: (context, item) {
    String? name = item['name'];
    return Text(name ?? "empty"); // 如果 name 为空则显示 "empty"
  },
  // 组分隔符小部件
  groupSeparatorBuilder: (year) {
    return Text(year.toString());
  },

  // 自定义网格委托（可选）
  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 80,
    childAspectRatio: 5 / 9,
    crossAxisSpacing: 25,
    mainAxisSpacing: 15,
  ),
),

参数说明

对于普通列表：

对于网格列表：

示例代码

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

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

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

  // 示例书籍列表
  static const List<Map<String, dynamic>> _books = [
    {"name": "Atomic Habits", "year": 2018},
    {"name": "The Miracle Morning", "year": 2018},
    {"name": "Jurassic Park", "year": 2019},
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text("Grouped List"),
        ),
        body: Column(
          children: [
            Expanded(
              child: ZGroupedList(
                // 所有的项目列表
                items: _books,
                // 你要根据什么元素进行排序？
                sortBy: (item) {
                  int year = item['year'];
                  return year;
                },
                // 项目小部件
                itemBuilder: (context, item) {
                  String? name = item['name'];
                  return Text(name ?? "empty"); // 如果 name 为空则显示 "empty"
                },
                // 组分隔符小部件
                groupSeparatorBuilder: (year) {
                  return Text(year.toString());
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}