flutter 当在NestedScrollView中滚动第一页时，第二页也会滚动到SliverPersistentHeader下面

soat7uwm 于 2023-05-01 发布在 Flutter

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

我有这样的NestedScrollView：

headers: [
  SliverToBox(), // This scrolls away
  SliverPersistentHeader(), // This needs to pin
]
body: TabBarView() // Classic TabBar view with multiple pages

这是它看起来unscrolled：

这是我开始滚动第一页时的样子（到目前为止都很好）：

这是当我滑动到下一个标签时的样子。请注意，下一页已经滚动了一点（从2开始，它应该从0开始）。不同之处在于PersistentSliverHeader的高度，基本上第二个页面会滚动到标题下面。如何使第1页的滚动条不影响第2页的滚动条？

代码：这里是Gist，不幸的是它不工作在web/dartpad，但在移动的运行没有问题：https://gist.github.com/itsJoKr/eca5b57c2f290f517862dcd118a16d4d

flutter

来源：https://stackoverflow.com/questions/76098107/when-scrolling-first-page-in-nestedscrollview-the-second-page-will-be-scrolled-u

1条答案

按热度按时间

lhcgjxsq1#

答案是使用SliverOverlapAbsorber。

SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverPersistentHeader(
                  pinned: true,
                  delegate: ChipTabBarSliverDelegate2(
                    tabController,
                    [
                      'tab 1',
                      'tab 2',
                      'tab 3',
                    ],
                    MediaQuery.of(context).padding.top,
                  ),
                ),
              ),

钥匙这是手柄。正如文档中所说：

// This widget takes the overlapping behavior of the SliverAppBar,
  // and redirects it to the SliverOverlapInjector below. If it is
  // missing, then it is possible for the nested "inner" scroll view
  // below to end up under the SliverAppBar even when the inner
  // scroll view thinks it has not been scrolled.
  // This is not necessary if the "headerSliverBuilder" only builds
  // widgets that do not overlap the next sliver.

赞(0）回复(0）举报 2023-05-01

我来回答

flutter 当在NestedScrollView中滚动第一页时，第二页也会滚动到SliverPersistentHeader下面

1条答案

相关问题

热门标签

最新问答