如何在 Flutter 中创建一个带有粘性标题的聊天页面，例如 Telegram 群聊？答案

【问题标题】：How to create a chat page with a sticky header like Telegram group chat in Flutter?如何在 Flutter 中创建一个带有粘性标题的聊天页面，例如 Telegram 群聊？
【发布时间】：2022-06-16 21:28:32
【问题描述】：

我正在构建一个类似于 Telegram 群聊的页面，但我无法同时为日期小部件和用户头像提供位置粘性。

我在 pub.dev 上尝试了几乎所有可用的软件包，包括 FlutterStickyHeader 和 FlutterListView，但我无法同时给 Avatar 和 Date 小部件一个 Sticky 位置，因为它们的方向相反。我也尝试使用CustomScrollView 自己构建它，但又遇到了同样的问题。与我想要的最接近的结果是 FlutterListView 包，但我一次只能给其中一个提供粘性位置。

FlutterListView(
      delegate: FlutterListViewDelegate(
        (BuildContext context, int index) =>
            ListTile(title: Text('List Item ${elements[index]}')),
        childCount: elements.length,
        onItemSticky: (i) => i % 3 == 0,
      ),
    );

这是一个示例代码，不是真正的代码。

【问题讨论】：

标签： android ios windows flutter dart

【解决方案1】：

请尝试 grouped_list https://pub.dev/packages/grouped_list 库添加部分。在这里您可以管理自己的部分构建器。希望这可以帮助你。

例子

GroupedListView<dynamic, String>(
    elements: _elements,
    groupBy: (element) => element['group'],
    groupSeparatorBuilder: (String groupByValue) => Text(groupByValue),
    itemBuilder: (context, dynamic element) => Text(element['name']),
    itemComparator: (item1, item2) => item1['name'].compareTo(item2['name']), // optional
    useStickyGroupSeparators: true, // optional
    floatingHeader: true, // optional
    order: GroupedListOrder.ASC, // optional
  ),

【讨论】：

我试过这个包。这个包和其他包一样，只会让一个小部件变得粘滞，但我有两个完全独立的标题，头像和日期。 (See this screenshot)
所以你的头像也会贴在上面？如果是这样，您需要合并两个库。第一个将粘贴日期，下一个将粘贴头像
我也试过这个，但是不能合并两个包，因为这些包是基于CustomScrollView的。如果我们在另一个CustomScrollView 中使用一个CustomScrollView，我们会得到一个错误。

【解决方案2】：

这对我来说很好。尝试 grouped_list https://pub.dev/packages/grouped_list 包与 groupHeaderBuilder

GroupedListView<StaticChat, String>(
      controller: listScrollController,
      elements: widget.privateChat.messages,
      groupBy: (element) => element.date,
     groupHeaderBuilder: (element) => ListTile(
        leading: CircleAvatar(
          backgroundImage: NetworkImage(element.sentBy.profilePicture!),
        ),
        title: Text(element.date),
      ),
      indexedItemBuilder: (context, StaticChat element, index) =>
          chatBubble(element, index),
      itemComparator: (item1, item2) => item1.time.compareTo(item2.time),
      useStickyGroupSeparators: true,
      floatingHeader: true,
      order: GroupedListOrder.ASC,
    );

【讨论】：

但这和我的代码没有什么不同！它仍然只是粘性日期，而不是头像。