如何在颤动中滚动时固定列表的组标题

Posted 2023-02-23

【中文标题】如何在颤动中滚动时固定列表的组标题

【英文标题】：how to pin a group title of a list while scrolling in flutter

【发布时间】：2021-11-28 11:08:10

【问题描述】：

我想在列表中有一个组标题的固定标题，此标题更改取决于滚动的组，就像在 android 中滚动联系人并固定起始字母一样。

【问题讨论】：

请澄清您的具体问题或提供更多详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

【参考方案1】：

我更喜欢使用sliver_tools，你可以在那里找到其他包。

这是一个演示小部件

class AlignX extends StatelessWidget 
  const AlignX(Key? key) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.deepPurple,
      body: CustomScrollView(
        slivers: [
          MultiSliver(
            pushPinnedChildren: true,
            children: [
              MultiSliver(
                pushPinnedChildren: true,
                children: [
                  SliverPinnedHeader(
                    child: Container(
                      height: 100,
                      color: Colors.purple,
                      child: Text("Group 1"),
                    ),
                  ),
                  ...List.generate(
                    22,
                    (index) => Container(
                        height: 100, child: Text("  Group1 item $index")),
                  ),
                ],
              ),
              MultiSliver(
                pushPinnedChildren: true,
                children: [
                  SliverPinnedHeader(
                    child: Container(
                      height: 100,
                      color: Colors.deepOrange,
                      child: Text("Group 2"),
                    ),
                  ),
                  ...List.generate(
                    22,
                    (index) => Container(
                        height: 100, child: Text("Group2 item $index")),
                  ),
                ],
              ),
              MultiSliver(
                pushPinnedChildren: true,
                children: [
                  SliverPinnedHeader(
                    child: Container(
                      height: 100,
                      color: Colors.pinkAccent,
                      child: Text("Group 3"),
                    ),
                  ),
                  ...List.generate(
                    22,
                    (index) => Container(
                        height: 100, child: Text("Group3 item $index")),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  

访问sliver_tools了解更多信息。