如何在向上滚动时隐藏应用栏但向下滚动时显示？答案

【问题标题】：How to hide app bar while scrolling up but shows up when scrolling down?如何在向上滚动时隐藏应用栏但向下滚动时显示？
【发布时间】：2020-07-14 10:54:07
【问题描述】：

我正在尝试实现我们在 android WhatsApp 中看到的行为，并建议材料设计中的选项卡行为，查看建议 here 和视频 here。当我向下滚动时，我希望标签栏可见但应用栏隐藏，这种行为也可以在中型 android 应用上看到。

我看到有一个较早的答案here，但它对我不起作用。

我尝试了几种方法，但嵌套滚动视图对我不起作用。

 return DefaultTabController(
  length: 2,
  child:Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
         SliverAppBar(
            title: Text("Application"),
            floating: true,
            pinned: true,
            snap: true,
            bottom: TabBar(
              tabs: <Tab>[
               Tab(text: "T"),
               Tab(text: "B"),
              ], // <-- total of 2 tabs
            ),
          ),
        ];
      },
      body: TabBarView(
        children: <Widget>[
         RandomWords(),
         RandomWords(),
        ], 
      ),
    ),
  ),
);

也试过了，

Scaffold(
   body: NestedScrollView(
     controller: _scrollViewController,
     headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
       return <Widget>[
         SliverAppBar(
           title: Text("N"),
           pinned: true,
           floating: true,
           forceElevated: innerBoxIsScrolled,
           //snap: true,
           bottom: TabBar(
             tabs: <Tab>[
              Tab(text: "T"),
              Tab(text: "B"),
             ],
             controller: _tabController,
           ),
         )
       ];
     },
     body: TabBarView(
       children: <Widget>[
         RandomWords(),
         RandomWords(),
       ],
       controller: _tabController,
     ),
   ),
 ),
);

我的代码可用here。

NestedScrollView 是否有任何原因可能不起作用？

【问题讨论】：

您可以添加您尝试过的代码吗？

标签： flutter dart

【解决方案1】：

你可以使用 SliverList 和 SliverAppBar

【讨论】：

尝试设置浮动：假，固定：假，捕捉：假
发生了什么？可以链接视频吗？
@GenchiGenbutsu 我在选项卡中加载的小部件似乎存在问题。

【解决方案2】：

试试这个

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: new Scaffold(
        body: new NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              new SliverAppBar(
                title: Text("Application"),
                floating: true,
                pinned: true,
                snap: true,
                bottom: new TabBar(
                  tabs: <Tab>[
                    new Tab(text: "T"),
                    new Tab(text: "B"),
                  ], // <-- total of 2 tabs
                ),
              ),
            ];
          },
          body: new TabBarView(
            children: <Widget>[
              Center(
                  child: Text(
                'T Tab',
                style: TextStyle(fontSize: 30),
              )),
              Center(
                  child: Text(
                'B Tab',
                style: TextStyle(fontSize: 30),
              )),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

【讨论】：

因此，虽然这本身仅适用于选项卡中的文本，但当我尝试加载我自己的小部件时，它不再适用于滚动
基本行为是小部件显示一个加载 json 文件的列表，当有人单击列表中的条目时，我将它们导航到新页面。