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

Posted 2023-02-23

【中文标题】按下 Tab 时自动滚动到 SliverList 项目之一

【英文标题】：Auto scroll to one of SliverList items when a Tab is pressed

【发布时间】：2020-12-18 08:33:38

【问题描述】：

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

以下是相关代码供参考：

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

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

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

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

更多上下文的屏幕截图

【问题讨论】：

为什么不用ListView 而不是SliverList？

我需要我的条子一起滚动。因此，我的 RestaurantMenuCards（SliverList 的子项）不能自行滚动。

我更新了问题以获得更多上下文。

【参考方案1】：

我在answer 的帮助下解决了这个问题。我用SliverToBoxAdapter 替换了SliverList。孩子是Column 中我的RestaurantMenuCard 的列表。因此，生成的小部件树是：

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

如链接答案中所述，当我向 RestaurantMenuCard 的每个实例添加一个全局键时，奇迹发生了。

最后，我在TabBar的onTap函数中触发Scrollable.ensureVisible(context)。