flutter如何实现分组列表功能

在Flutter中如何实现类似通讯录的分组列表功能？希望能支持按字母分组，并且每个分组有标题头。数据是从API获取的JSON格式，需要先按特定字段排序再分组显示。最好能提供滚动时分组标题吸顶的效果，类似iOS的UITableView风格。有没有推荐的package或实现方案？

2 回复

Flutter中可通过ListView.builder与ListView.separated实现分组列表。结合ScrollController监听滚动，动态切换分组标题。也可使用第三方库如sticky_headers实现粘性分组效果。

更多关于flutter如何实现分组列表功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现分组列表功能，推荐使用 ListView.builder 结合 Map 或 List 数据结构来组织数据。以下是两种常见方法：

方法一：使用 Map 分组数据

  1. 数据结构：将数据按分组键存储在 Map<String, List<Item>> 中。
  2. 构建列表：通过 ListView.builder 渲染分组标题和子项。
import 'package:flutter/material.dart';

class GroupedListView extends StatelessWidget {
  final Map<String, List<String>> groupedData = {
    'A组': ['Apple', 'Ant'],
    'B组': ['Banana', 'Ball'],
  };

  @override
  Widget build(BuildContext context) {
    List<String> keys = groupedData.keys.toList();
    
    return ListView.builder(
      itemCount: _getTotalItemCount(),
      itemBuilder: (context, index) {
        var (groupIndex, itemIndex) = _getGroupAndItemIndex(index);
        String groupKey = keys[groupIndex];
        
        if (itemIndex == -1) {
          // 分组标题
          return ListTile(
            title: Text(groupKey, style: TextStyle(fontWeight: FontWeight.bold)),
          );
        } else {
          // 分组子项
          return ListTile(
            title: Text(groupedData[groupKey]![itemIndex]),
          );
        }
      },
    );
  }

  // 计算总项数（分组标题 + 所有子项）
  int _getTotalItemCount() {
    int count = groupedData.length; // 分组标题数
    groupedData.forEach((key, value) => count += value.length);
    return count;
  }

  // 根据全局索引获取分组和子项索引
  (int, int) _getGroupAndItemIndex(int globalIndex) {
    int current = 0;
    for (int i = 0; i < groupedData.keys.length; i++) {
      String key = groupedData.keys.elementAt(i);
      if (globalIndex == current) {
        return (i, -1); // 返回分组标题
      }
      current++;
      
      for (int j = 0; j < groupedData[key]!.length; j++) {
        if (globalIndex == current) {
          return (i, j); // 返回子项
        }
        current++;
      }
    }
    return (-1, -1);
  }
}

方法二：使用第三方库 grouped_list

更简便的方式是使用 grouped_list 包：

  1. 添加依赖：
dependencies:
  grouped_list: ^5.1.2
  1. 实现代码：
import 'package:flutter/material.dart';
import 'package:grouped_list/grouped_list.dart';

class Item {
  final String name;
  final String group;

  Item({required this.name, required this.group});
}

List<Item> elements = [
  Item(name: 'Apple', group: 'A'),
  Item(name: 'Ant', group: 'A'),
  Item(name: 'Banana', group: 'B'),
];

class GroupedListExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GroupedListView<Item, String>(
      elements: elements,
      groupBy: (item) => item.group,
      groupComparator: (value1, value2) => value2.compareTo(value1),
      itemComparator: (item1, item2) => item1.name.compareTo(item2.name),
      order: GroupedListOrder.DESC,
      useStickyGroupSeparators: true,
      groupSeparatorBuilder: (String value) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          value,
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      ),
      itemBuilder: (c, element) {
        return ListTile(
          title: Text(element.name),
        );
      },
    );
  }
}

选择建议：

  • 手动实现：适合简单分组或需要高度自定义的场景。
  • 使用 grouped_list：快速实现标准分组列表，支持粘性头部等高级功能。

两种方法均能高效实现分组列表，根据项目需求选择即可。

回到顶部