Flutter分组列表展示插件flutter_group_list

Flutter分组列表展示插件flutter_group_list_view的使用

特性

列表项可以分组。
支持 ListView 和 SliverList。
每个分组支持头部和尾部。
所有来自 ListView.builder 和 SliverList.builder 构造函数的字段都可用。

截图

分组列表

开始使用

在你的 pubspec.yaml 文件中添加该包：

flutter_group_list_view: ^1.0.3

在你的 Dart 文件中导入库：

import 'package:flutter_group_list_view/flutter_group_list_view.dart';

用 GroupListView 替换 ListView：

List _elements = [
  {
    "storeName": "ASICS Store",
    "storeCode": "s01",
    "goodsList": [{}, {}]
  },
  {
    "storeName": "SALOMON Store",
    "storeCode": "s02",
    "goodsList": [{}]
  },
  {
    "storeName": "ASICS Store",
    "storeCode": "s01",
    "goodsList": [{}, {}]
  }
];

CustomScrollView(
  slivers: [
    GroupSliverListView(
      sectionCount: _elements.length,
      itemInSectionCount: (int section) {
        return _elements[section]['goodsList'].length;
      },
      headerForSectionBuilder: (int section) {
        return Container(
          height: 40,
          margin: const EdgeInsets.only(left: 12, right: 12, top: 10),
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
            color: Colors.green,
          ),
          child: const Row(
            children: [Text("this is header")],
          ),
        );
      },
      itemInSectionBuilder: (BuildContext context, IndexPath indexPath) {
        return Container(
          height: 90,
          margin: const EdgeInsets.only(left: 12, right: 12),
          color: Colors.white,
          child: const Row(
            children: [Text("this is item")],
          ),
        );
      },
      separatorBuilder: (IndexPath indexPath) {
        return Container(
          height: 1,
          color: Colors.grey,
        );
      },
      footerForSectionBuilder: (int section) {
        return Container(
          height: 40,
          margin: const EdgeInsets.only(left: 12, right: 12),
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
            color: Colors.blue,
          ),
          child: const Row(
            children: [Text("this is footer")],
          ),
        );
      },
    )
  ],
);

参数说明

sectionCount: 分组的数量。(必填)
itemInSectionCount: 返回指定分组中的项目数量的函数。(必填)
itemInSectionBuilder: 返回定义指定 IndexPath 处项目的 Widget 的函数。itemBuilder 提供当前分组和索引。(必填)

itemInSectionBuilder: (BuildContext context, IndexPath indexPath) {
  return Container(
    height: 90,
    margin: const EdgeInsets.only(left: 12, right: 12),
    color: Colors.white,
    child: const Row(
      children: [Text("this is item")],
    ),
  );
}

headerForSectionBuilder: 返回定义每个分组头部的 Widget 的函数。(必填)
separatorBuilder: 返回定义指定 IndexPath 处分割线的 Widget 的函数。
footerForSectionBuilder: 返回定义每个分组尾部的 Widget 的函数。

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

List _elements = [
  {
    "storeName": "ASICS Store",
    "storeCode": "s01",
    "goodsList": [{}, {}]
  },
  {
    "storeName": "SALOMON Store",
    "storeCode": "s02",
    "goodsList": [{}]
  },
  {
    "storeName": "ASICS Store",
    "storeCode": "s01",
    "goodsList": [{}, {}]
  }
];

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          // 导航栏
          title: const Text("GroupSliverListViewDemo"),
          actions: [
            // 导航栏右侧菜单
            IconButton(icon: const Icon(Icons.share), onPressed: () {}),
          ],
        ),
        body: CustomScrollView(
          slivers: [
            GroupSliverListView(
              sectionCount: _elements.length,
              itemInSectionCount: (int section) {
                return _elements[section]['goodsList'].length;
              },
              headerForSectionBuilder: (int section) {
                return Container(
                  height: 40,
                  margin: const EdgeInsets.only(left: 12, right: 12, top: 10),
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
                    color: Colors.green,
                  ),
                  child: const Row(
                    children: [Text("this is header")],
                  ),
                );
              },
              itemInSectionBuilder: (BuildContext context, IndexPath indexPath) {
                return Container(
                  height: 90,
                  margin: const EdgeInsets.only(left: 12, right: 12),
                  color: Colors.white,
                  child: const Row(
                    children: [Text("this is item")],
                  ),
                );
              },
              separatorBuilder: (IndexPath indexPath) {
                return Container(
                  height: 1,
                  color: Colors.grey,
                );
              },
              footerForSectionBuilder: (int section) {
                return Container(
                  height: 40,
                  margin: const EdgeInsets.only(left: 12, right: 12),
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
                    color: Colors.blue,
                  ),
                  child: const Row(
                    children: [Text("this is footer")],
                  ),
                );
              },
            )
          ],
        ));
  }
}

更多关于Flutter分组列表展示插件flutter_group_list_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

zlyuanteng 1楼

更多关于Flutter分组列表展示插件flutter_group_list_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用flutter_group_list_view插件来展示分组列表的一个示例代码。假设你已经在pubspec.yaml文件中添加了flutter_group_list_view依赖并运行了flutter pub get。

首先，确保你的pubspec.yaml包含以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_group_list_view: ^最新版本号  # 请替换为最新版本号

然后，你可以在你的Dart文件中使用FlutterGroupListView来创建分组列表。以下是一个完整的示例：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 模拟数据
  List<GroupModel> groupData = [
    GroupModel(
      title: 'Group 1',
      items: [
        'Item 1-1',
        'Item 1-2',
        'Item 1-3',
      ],
    ),
    GroupModel(
      title: 'Group 2',
      items: [
        'Item 2-1',
        'Item 2-2',
      ],
    ),
    GroupModel(
      title: 'Group 3',
      items: [
        'Item 3-1',
        'Item 3-2',
        'Item 3-3',
        'Item 3-4',
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Group List View Demo'),
      ),
      body: FlutterGroupListView(
        groupList: groupData,
        groupHeaderBuilder: (context, group) {
          return Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text(
              group.title,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          );
        },
        groupItemBuilder: (context, group, index, item) {
          return ListTile(
            title: Text(item),
            onTap: () {
              // 处理点击事件
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('You tapped: $item')),
              );
            },
          );
        },
      ),
    );
  }
}

// 定义数据模型
class GroupModel {
  String title;
  List<String> items;

  GroupModel({required this.title, required this.items});
}

在这个示例中：

MyApp是应用的根组件。
MyHomePage是主页，它包含了一个状态（_MyHomePageState），用于管理分组列表的数据。
groupData是一个包含分组信息的列表，每个分组包含标题和项。
FlutterGroupListView用于显示分组列表。
groupHeaderBuilder用于构建每个分组的标题。
groupItemBuilder用于构建每个分组中的项，并处理项的点击事件。

运行这个示例，你将看到一个带有分组标题和项的列表。点击某个项时，会显示一个SnackBar。

请确保你使用的flutter_group_list_view版本与代码兼容，并根据需要进行调整。