Question

我正在实现一个聊天小部件，并使用https://github.com/letsar/flutter_sticky_header库按日期分隔消息，您可以在Whatsapp和Telegram上看到相同的行为。

我正在构建几个slivers，每个slivers都包含该日期的消息和标头，该标头基本上是表示相关日期的文本。我将CustomScrollView属性设置为true的reverse传递给return CustomScrollView( slivers: _buildListItem(context, sectionIndex), reverse: true, controller: listScrollController, );。

  List<Widget> _buildListItem(
    BuildContext context,
    List<ChatSection> chatSections,
  ) {
    List<Widget> slivers = List();
    chatSections.forEach((chatSection) {
      slivers.add(_buildChatSliver(
          context, chatSection.messages, chatSection.datetime));
    });

    return slivers;
  }

  SliverStickyHeaderBuilder _buildChatSliver(BuildContext context,
      List<ChatMessage> chatMessages, DateTime dateTimeHeader) {
    return SliverStickyHeaderBuilder(
      overlapsContent: false,
      builder: (context, state) {
        DateTime now = DateTime.now();
        String headerText = now.year != dateTimeHeader.year
            ? DateFormat("YYYY MMM dd").format(dateTimeHeader)
            : DateFormat("MMM dd").format(dateTimeHeader);
        return Container(
          padding: EdgeInsets.fromLTRB(5, 0, 15, 5),
          child: Center(
            child: Container(
              padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
              decoration: BoxDecoration(
                  color: Color.fromARGB(200, 150, 150, 150),
                  borderRadius: BorderRadius.all(Radius.circular(5))),
              child: Text(
                headerText,
                style: TextStyle(
                    color: Colors.white70,
                    fontSize: 12.0,
                    fontStyle: FontStyle.italic),
              ),
            ),
          ),
        );
      },
      sliver: SliverList(
          delegate: SliverChildBuilderDelegate(
              (context, i) => _buildItem(chatMessages[i]),
              childCount: chatMessages.length)),
    );
  }

a = ['wood', 'tree', 'bark', 'log']

b = ['branch', 'mill', 'boat', 'boat', 'house']

c = ['log', 'tree', 'water', 'boat']

d = ['water', 'log', 'branch', 'water']

e = ['branch', 'rock', 'log']

一切正常，除了标题固定在屏幕底部（我需要它们固定在顶部）。我怎样才能解决这个问题？任何指针将不胜感激。

Answer 1

该插件似乎有问题，其他开发人员也选择了

Reverse list support

否则，我将使用现有的小部件重新实现白名单，也许是SliverList和SliverPersistentHeader的组合

SliverPersistentHeader Class

Answer 2

好吧，我将答案移至其他位置，并将其提交至此处供以后参考：

尝试使用其他库（https://pub.dev/packages/sticky_headers）。

return StickyHeader(
  header: _sectionHeader(dateText),
  content: Column(
    children: <Widget>[
      if (isLast) _topWidget(),
      for (var i in list.reversed)
        ListTile(
          title: ChatMessageWidget(
            message: i,
            senderUuid: widget.senderUuid,
            key: Key('chatmsg$key$i'),
            onLongPress: _onMsgPressed,
            onTap: _onMsgPressed,
          )
        )
    ]
  )
);

，然后在构建功能中：

return CustomScrollView(
  key: Key('MessagesList'),
  controller: _scrollController,
  slivers: <Widget>[
    SliverList(delegate: SliverChildBuilderDelegate((context, index) {
      if (index == 0) {
        return _bottomView();
      } else {
        final key = keys[index - 1];
        return _buildSection(context, key, mapped[key], index == keys.length);
      }
    },
    childCount: keys.length + 1)),
  ],
  reverse: true,
);

对我来说很好！

将条添加到反向CustomScrollView或ListView时，将粘性标头固定在顶部

2 个答案: