flutter - 向反向 CustomScrollView 或 ListView 添加条时将粘性标题固定在顶部

问题描述

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

我正在构建几个slivers，每个都包含该日期的消息和一个标题，该标题基本上是显示相关日期的文本。我将slivers属性设置CustomScrollView为reversetrue。

 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)),
    );
  }

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

标签： flutterflutter-sliver

flutter - 向反向 CustomScrollView 或 ListView 添加条时将粘性标题固定在顶部

问题描述

解决方案

推荐阅读