Flutter分组网格视图插件group_grid_view的使用

Group Grid View

GroupGridView 是一个允许你将列表项分组并支持类似 iOS UICollectionView 分区头部和尾部的 GridView。

Features

• 网格项可以被分组。
• 支持每个组的头部和尾部。
• 提供了 GridView.builder 构造函数中的所有字段。

Installing

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  group_grid_view: ^latest

Import

导入包：

import 'package:group_grid_view/group_grid_view.dart';

Usage

你可以像使用其他小部件一样使用它，完整的示例可以在 /example 文件夹中找到。

以下是完整的示例代码，展示了如何创建一个带有分组的网格视图：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Group Grid View'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final List<TestModel> dataSource = [
    TestModel(
        sectionName: "Animals",
        listItems: ["Dog", "Cat", "Bear", "Tiger", "Lion"]),
    TestModel(
        sectionName: "Vehicle",
        footerName: "End of vehicle section",
        listItems: ["Car", "Motor", "Air plane", "Boat"]),
    TestModel(sectionName: "Countries", listItems: [
      "Vietnam",
      "China",
      "Laos",
      "Thai",
      "Japan",
      "Singapore",
      "England",
      "USA",
      "Russian"
    ]),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GroupGridView(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, mainAxisSpacing: 16, crossAxisSpacing: 16),
          sectionCount: dataSource.length,
          headerForSection: (section) => Container(
              padding: const EdgeInsets.symmetric(vertical: 12),
              child: Text(dataSource[section].sectionName,
                  style: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold))),
          footerForSection: (section) {
            final footer = dataSource[section].footerName;
            return footer != null
                ? Container(
                    padding: const EdgeInsets.only(top: 12, bottom: 32),
                    child: Text(footer, style: const TextStyle(fontSize: 16)))
                : const SizedBox(height: 32);
          },
          itemInSectionBuilder: (_, indexPath) {
            final data =
                dataSource[indexPath.section].listItems[indexPath.index];
            return Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    border: Border.all(color: Colors.blue)),
                alignment: Alignment.center,
                padding: const EdgeInsets.all(8),
                child: Text(data, style: const TextStyle(fontWeight: FontWeight.w500)));
          },
          itemInSectionCount: (section) =>
              dataSource[section].listItems.length),
    );
  }
}

class TestModel {
  TestModel({
    required this.sectionName,
    required this.listItems,
    this.footerName,
  });

  final String sectionName;
  final String? footerName;
  final List<String> listItems;
}

这个例子展示了如何创建一个分组网格视图，并为每个分组添加头部和尾部。你可以根据自己的需求调整数据源和样式。希望这对你有所帮助！如果有任何问题或需要进一步的帮助，请随时告诉我。

Trần Đạt, Thank you!