Flutter：按下 Tab 时自动滚动到 SliverList 项目之一

Question

我有一个有状态的小部件，顶部有选项卡，下面有一个列表。该列表被细分为不同的类别。每个类别都列在每个选项卡中。我想要做的是在选项卡中按下某个项目时，我希望它在列表中的相应类别滚动查看。

以下是相关代码供参考：

SliverPersistentHeader(
  pinned: true,
  delegate: _SliverAppBarTabDelegate(
    child: Container(
      child: TabBar(
        isScrollable: true,
        labelColor: Colors.black,
        tabs: createTabList(),
        controller: tabBarController,
      ),
    ),
  ),
),
SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      return Padding(
        padding: const EdgeInsets.only(top: kSpacerRegular),
        child: RestaurantMenuCard(menuCard: menuCards[index]),
      );
    },
    childCount: menuCards.length,
  ),
),

我搜索了一整天寻找解决方案，但找不到。我也试过这个包，但在我的情况下似乎不起作用。

这是我的“小部件树”以获得更多上下文：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(),
        SliverPersistentHeader(),
        SliverList(),
      ],
    ),
  );
}

编辑：添加了更多上下文的屏幕截图

Answer 1

我在这个答案的帮助下解决了这个问题。我替换SliverList为SliverToBoxAdapter. child 是 myRestaurantMenuCard中的列表Column。因此，生成的小部件树是：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(),
        SliverPersistentHeader(),
        SliverToBoxAdapter(
          Column(
            RestaurantMenuCard(),
            RestaurantMenuCard(),
            ...
          ),
        ),
      ],
    ),
  );
}

当我向RestaurantMenuCard链接的答案中讨论的每个实例添加全局键时，神奇就发生了。

于是最后，我触发Scrollable.ensureVisible(context)在onTap我的功能TabBar。