Как скрыть панель приложения при прокрутке вверх, но отображается при прокрутке вниз?

Question

Я пытаюсь добиться поведения, которое мы видим в android WhatsApp, и рекомендовал поведение вкладок в материальном дизайне, проверьте предложение здесь и видео здесь . Когда я прокручиваю вниз, я хочу, чтобы панель вкладок была видна, но панель приложения скрывалась, это поведение также можно увидеть в приложении medium android.

Я видел, что был более ранний ответ здесь , но у меня это не сработало.

Я пробовал несколько подходов, но просмотр вложенной прокрутки у меня не работает.

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

Мой код доступен здесь .

Есть ли причина, по которой NestedScrollView может не работать?

Answer 1

Попробуйте это

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

Вывод:

введите описание изображения здесь

Answer 2

Вы можете использовать SliverList и SliverAppBar