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

Question

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

Answer 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了解更多信息。