flutter 分组列表

最新推荐文章于 2025-11-25 10:46:19 发布

原创最新推荐文章于 2025-11-25 10:46:19 发布 · 6.6k 阅读

2 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#flutter #分组 #列表 #联系人 #通讯录

flutter 专栏收录该内容

72 篇文章

订阅专栏

这篇博客展示了如何在Flutter中创建分组列表，适用于如联系人或通讯录的展示。文章提供了一览效果，并邀请读者加入相关Q群交流，同时提供了在简书、优快云和掘金上的作者链接，以获取更多详细内容。

先看看效果是不是你想要的

library grouped_listview;

import 'package:flutter/material.dart';
typedef TGroup GroupFunction<TElement, TGroup>(TElement element);
typedef Widget ListBuilderFunction<TElement>(BuildContext context, TElement element);
typedef Widget GroupBuilderFunction<TGroup>(BuildContext context, TGroup group);

class GroupedListView<TElement, TGroup> extends StatelessWidget {
  final List<TElement> collection;
  final GroupFunction<TElement, TGroup> groupBy;
  final ListBuilderFunction<TElement> listBuilder;
  final GroupBuilderFunction<TGroup> groupBuilder;

  final List<dynamic> _flattenedList = List();

  GroupedListView(
      {@required this.collection,
        @required this.groupBy,
        @required this.listBuilder,
        @required this.groupBuilder}) {

    _flattenedList.addAll(Grouper<TElement, TGroup>().groupList(collection, groupBy));
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        var element = _flattenedList[index];
        if (element is TElement) {
          return listBuilder(context, element);
        }
        return groupBuilder(context, element);
      },
      itemCount: _flattenedList.length,
    );
  }
}

class Grouper<TElement, TGroup> {
  final Map<TGroup, List<TElement>> _groupedList = {};

  List<dynamic> groupList(List<TElement> collection, GroupFunction<TElement, TGroup> groupBy) {
    if (collection == null) throw ArgumentError("Collection can not be null");
    if (groupBy == null) throw ArgumentError("GroupBy function can not be null");

    List flattenedList = List();
    collection.forEach((element) {
      var key = groupBy(element);
      if (!_groupedList.containsKey(key)) {
        _groupedList[key] = List<TElement>();
      }
      _groupedList[key].add(element);
    });
    _groupedList.forEach((key, list) {
      flattenedList.add(key);
      flattenedList.addAll(list);
    });
    return flattenedList;
  }
}

Column(
      children: <Widget>[
        Container(child: _inputView()),
        Expanded(
            flex: 1,
            child: GroupedListView<Group, String>(
              collection: list,
              groupBy: (Group g) => g.groupName,
              listBuilder: (BuildContext context, Group g) => _buildRow(g),
              groupBuilder: (BuildContext context, String name) => Text(name),
            )),
      ],
    );

class Group {
  String groupName;
  UserModel value;

  Group(this.groupName, this.value);
}

更多详解：
喜欢可以加Q群号:913934649,点赞,评论;

简书： https://www.jianshu.com/u/88db5f15770d

csdn：https://me.youkuaiyun.com/beyondforme

掘金：https://juejin.im/user/5e09a9e86fb9a016271294a7