Flutter分组滚动视图插件grouped_scroll_view的使用

grouped_scroll_view

grouped_scroll_view 是一个用于显示分组列表项的包。提供一个列表、分组器，它将作为一个 ListView、GridView 或其他形式显示。支持在 scrollView 中使用复选框或单选按钮。

预览

分组网格	分组列表	网格切换编辑	列表切换编辑

分组网格复选框	分组列表单选	网格复选框	列表单选

开始使用

在您的 pubspec.yaml 文件中添加此包：

dependencies:
  grouped_scroll_view: <latest_version>

功能特性

• 支持粘性头部、自定义分组器、自定义头部、自定义尾部
• 支持在 scrollView 中使用 复选框 或 单选按钮

使用示例

分组网格视图

GroupedScrollView.grid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    mainAxisSpacing: 5, 
    crossAxisSpacing: 5, 
    crossAxisCount: widget.crossAxisCount
  ),
  groupedOptions: GroupedScrollViewOptions(
    itemGrouper: (Person person) {
      return person.birthYear;
    },
    stickyHeaderBuilder: (BuildContext context, int year, int groupedIndex) => Container(
      color: Colors.white,
      padding: const EdgeInsets.all(8),
      constraints: const BoxConstraints.tightFor(height: 30),
      child: Text(
        '$year',
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
    )
  ),
  itemBuilder: (BuildContext context, Person item) {
    return Container(
      color: Colors.lightGreen,
      padding: const EdgeInsets.all(8),
      constraints: const BoxConstraints.tightFor(width: 100),
      child: Center(
        child: Text(
          item.name,
          style: const TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
    );
  },
  data: DataCache.instance.persons,
  headerBuilder: (BuildContext context) => Column(
    children: const [
      Divider(thickness: 5,),
      Center(
        child: Text(
          'CustomHeader',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      Divider(thickness: 5,),
    ],
  ),
  footerBuilder: (BuildContext context) => Column(
    children: const [
      Divider(thickness: 5,),
      Center(
        child: Text(
          'CustomFooter',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      Divider(thickness: 5,),
    ],
  ),
)

分组列表视图

GroupedScrollView.list(
  groupedOptions: GroupedScrollViewOptions(
    itemGrouper: (Person person) {
      return person.birthYear;
    },
    stickyHeaderBuilder: (BuildContext context, int year, int groupedIndex) => Container(
      color: Colors.white,
      padding: const EdgeInsets.all(8),
      constraints: const BoxConstraints.tightFor(height: 30),
      child: Text(
        '$year',
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
    ),
  ),
  itemBuilder: (BuildContext context, Person item) {
    return Container(
      constraints: const BoxConstraints.expand(height: 35),
      child: Column(
        children: [
          Container(
            constraints: const BoxConstraints.expand(height: 30),
            color: Colors.lightGreen,
            child: Center(
              child: Text(
                item.name,
                style: const TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ],
      ),
    );
  },
  data: DataCache.instance.persons,
  headerBuilder: (BuildContext context) => Column(
    children: const [
      Divider(thickness: 5,),
      Center(
        child: Text(
          'CustomHeader',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      Divider(thickness: 5,),
    ],
  ),
  footerBuilder: (BuildContext context) => Column(
    children: const [
      Divider(thickness: 5,),
      Center(
        child: Text(
          'CustomFooter',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
      Divider(thickness: 5,),
    ],
  ),
)

复选框和单选按钮支持

如果列表需要支持复选框或单选按钮，请设置 toggleEnabled 为 true。

final controller = GroupedToggleController(
  toggleType: GroupedToggleType.checkbox,
  onToggleChanged: (int idx, bool selected) {
    // ...
  },
  toggleStyle: GroupedToggleStyle(),
);

GroupedScrollViewWithToggle.grid({
  data: List<T>,
  itemBuilder: (BuildContext context, T item) { /*...*/},
  toggleController: controller,
  toggleEnabled: true,
  // ...
});

// dispose
controller.dispose();

完整示例代码

以下是一个完整的示例代码，展示了如何在一个Flutter应用中使用 grouped_scroll_view 插件。

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

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

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

class HomePage extends StatefulWidget {
  final String title;

  HomePage({required this.title});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<Person> persons = [
    Person(name: "Alice", birthYear: 1990),
    Person(name: "Bob", birthYear: 1990),
    Person(name: "Charlie", birthYear: 1991),
    Person(name: "David", birthYear: 1992),
    Person(name: "Eve", birthYear: 1992),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GroupedScrollView.list(
        groupedOptions: GroupedScrollViewOptions(
          itemGrouper: (Person person) {
            return person.birthYear;
          },
          stickyHeaderBuilder: (BuildContext context, int year, int groupedIndex) => Container(
            color: Colors.white,
            padding: const EdgeInsets.all(8),
            constraints: const BoxConstraints.tightFor(height: 30),
            child: Text(
              '$year',
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
        ),
        itemBuilder: (BuildContext context, Person item) {
          return ListTile(
            title: Text(item.name),
          );
        },
        data: persons,
      ),
    );
  }
}

class Person {
  final String name;
  final int birthYear;

  Person({required this.name, required this.birthYear});
}

通过以上内容，您可以轻松地在Flutter项目中使用 grouped_scroll_view 插件来创建分组滚动视图，并根据需要添加复选框或单选按钮功能。