Flutter如何实现分组列表

在Flutter中如何实现一个分组列表，类似于通讯录那样按字母分类显示？目前尝试使用ListView.builder，但不知道怎么将数据分组并显示分组标题。希望能提供一个完整的示例代码，包括数据分组和UI渲染的实现方法。

2 回复

Flutter中实现分组列表可使用ListView.builder结合groupBy对数据进行分组，或使用第三方库如sticky_headers实现粘性分组效果。也可通过CustomScrollView与SliverList自定义分组布局。

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


在Flutter中，可以通过ListView.builder结合条件判断来实现分组列表。以下是实现步骤：

  1. 数据结构：将数据按分组组织，例如：
List<Map<String, dynamic>> data = [
  {'group': 'A', 'items': ['Apple', 'Ant']},
  {'group': 'B', 'items': ['Banana', 'Ball']},
];
  1. 构建列表：
ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, index) {
    var group = data[index];
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 分组标题
        Container(
          padding: EdgeInsets.all(16),
          color: Colors.grey[200],
          child: Text(group['group']),
        ),
        // 分组内容
        ...group['items'].map((item) => ListTile(
          title: Text(item),
        )).toList(),
      ],
    );
  },
)
  1. 优化：
  • 使用SliverAppBar和CustomScrollView实现更复杂的滚动效果
  • 添加分组展开/收起功能时，可配合ExpandableListView等第三方包

这种方法简单高效，适合大多数分组列表场景。

回到顶部