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

7kqas0il 于 2023-04-22 发布在 Flutter

关注(0)|答案(1)|浏览(140)

我有一个有状态的小部件，顶部有标签，下面有一个列表。列表被细分为不同的类别。每个类别都列在每个标签中。我想做的是当在标签中按下一个项目时，我希望列表中相应的类别滚动查看。
以下是相关代码以供参考：

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

屏幕截图以获取更多上下文

flutter

来源：https://stackoverflow.com/questions/63650198/auto-scroll-to-one-of-sliverlist-items-when-a-tab-is-pressed

1条答案

按热度按时间

f4t66c6m1#

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

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

当我向RestaurantMenuCard的每个示例添加一个全局键时，奇迹就发生了，正如链接答案中所讨论的那样。
最后，在TabBar的onTap函数中触发Scrollable.ensureVisible(context)。

赞(0）回复(0）举报 2023-04-22

我来回答

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

1条答案

相关问题

热门标签

最新问答