Flutter：带有 NestedScrollView 和 SliverAppBar 的选项卡答案

【问题标题】：Flutter: Tabs with NestedScrollView and SliverAppBarFlutter：带有 NestedScrollView 和 SliverAppBar 的选项卡
【发布时间】：2020-11-22 11:49:20
【问题描述】：

简而言之，我想要这种行为（滚动到底部时隐藏 appBar 的多个标签，滚动到顶部时显示 AppBar），并且我想保留每个标签的滚动位置：

我的所有选项卡都有一个滚动控制器，但如果我理解得很好，要实现SliverAppBar，我只需要一个滚动控制器，在主NestedScrollView 中使用，对吧？

而ScrollController 只能附加到一个ScrollView。那么如何管理我的 ScrollViews (StaggeredGridView) 以保留我的滚动位置？

我看到了ScrollController.positions 属性和PrimaryScrollController 类，但我不知道这些是否是解决方案。

如果有人有想法:)

【问题讨论】：

另外请提供一些代码，这样我们就不需要从头开始来帮助您了

标签： flutter

【解决方案1】：

一个简单的解决方案是这个包extended_nested_scroll_view。

这是我实现您想要的滚动行为的方式（滚动到底部时隐藏多个选项卡，滚动到顶部时显示AppBar）：

（它没有经过打磨，但你可以使用它）

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (context, isScrolled) {
        return [SliverAppBar(
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          title: Text('Pets'),
          centerTitle: false,
          actions: [
            IconButton(
              icon: Icon(Icons.share),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.pets),
              onPressed: () {},
            ),
          ],
        )];
      },
      body: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: TabBar(
            labelColor: Colors.black,
            tabs: [
              Tab(text: 'Dogs',),
              Tab(text: 'Cats'),
              Tab(text: 'Birds'),
            ],
          ),
          body: TabBarView(
            children: [
              Center(child: Icon(Icons.pets, color: Colors.blue)),
              Center(child: Icon(Icons.pets, color: Colors.green)),
              Center(child: Icon(Icons.pets, color: Colors.red)),
            ],
          ),
        ),
      )
    );
  }
}

结果：

我在NestedScrollView 中使用了一个脚手架和一个SliverAppBar，有了这些，你几乎可以得到两个单独的AppBar，而SliverAppBar 在向上滚动时会隐藏起来。为了保留每个选项卡的滚动位置，我将使用 3 个独立的ScrollController。如果您在这些方面需要更多帮助，请写评论；）

【讨论】：

非常感谢，这正是我想要的，您的示例非常适合简单的标签内容。但是，一旦我用可滚动的选项卡填充选项卡，AppBar 就不再隐藏了。我尝试在我的选项卡上使用和不使用独立的 ScrollControllers，但没有成功（但在所有情况下，当用户滚动到底部时，我需要 ScrollControllers 到我的“LoadMore”功能）
是的，我在为你写完这个例子后自己试过了，Github 上已经有一个未解决的问题，现在最好使用我上面链接的包。
您是否尝试为 NestedScrollView 和 Tab 提供相同的滚动控制器？唯一的缺点是每个滚动位置不会保存在 tabSwitch 上
感谢 cmets。我只是尝试对 NestedScrollView 和我的 ScrollView 使用相同的 ScrollController。为了让它工作，我们需要在一个没有足够元素来填充页面的选项卡上（没有滚动）。今晚我会检查链接的包，非常感谢:)
到目前为止，所有给定的解决方案都不起作用，所以我无法接受答案。我刚刚尝试使用 extended_nested_scroll_view 包，但无法让它在颤振主分支上工作（我需要它来解决另一个问题：/）