Android 隐藏卷轴颤振上的Appbar？

考虑一下这个图像。如您所见，它有一个appbar，appbar有选项卡式按钮。

---

我正在尝试设置appbar的动画，以便它在向上滚动时隐藏，并且只留下选项卡按钮来显示appbar apears和向上滚动appbar apears。请帮帮我。对不起，英语不好，不是美国人。我也不是英国人。我建议你必须通过SliveAppBar和SliverList来实现你的布局。 下面的代码可能会帮助您理解这一点

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',
      home: new MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {

    List buildTextViews(int count) {
      List<Widget> strings = List();
      for (int i = 0; i < count; i++) {
        strings.add(new Padding(padding: new EdgeInsets.all(16.0),
            child: new Text("Item number " + i.toString(),
                style: new TextStyle(fontSize: 20.0))));
      }
      return strings;
    }

    return Scaffold(
        body: new CustomScrollView(slivers: <Widget>[
          const SliverAppBar(
            title: const Text('Sliver App Bar'),
          ),
          new SliverList(
              delegate: new SliverChildListDelegate(buildTextViews(50)))
        ])
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（新的MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
标题：“颤振演示”，
主页：新建MyHomePage（），
debugShowCheckedModeBanner:false，
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
列出BuildTextView（整数计数）{
列表字符串=列表（）；
for（int i=0；i

如果我理解正确，以下代码应使应用程序栏在滚动时隐藏，而TabBar保持可见：

new Scaffold(
  body: new NestedScrollView(
    controller: _scrollViewController,
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        new SliverAppBar(
          title: new Text(widget.title),
          pinned: true,
          floating: true,
          forceElevated: innerBoxIsScrolled,
          bottom: new TabBar(
            tabs: <Tab>[
              new Tab(text: "STATISTICS"),
              new Tab(text: "HISTORY"),
            ],
            controller: _tabController,
          ),
        ),
      ];
    },
    body: new TabBarView(
      children: <Widget>[
        new StatisticsPage(),
        new HistoryPage(),
      ],
      controller: _tabController,
    ),
  ),
);

新脚手架(
正文：新嵌套滚动视图(
控制器：_scrollViewController，
headerSliverBuilder：（BuildContext上下文，boolInnerBoxIsCrolled）{
返回[
新滑杆(
标题：新文本（widget.title），
对,，
浮动：是的，
强制提升：内包装箱为羊角形，
底部：新选项卡栏(
选项卡：[
新选项卡（文本：“统计数据”），
新选项卡（文本：“历史记录”），
],
控制器：\ tab控制器，
),
),
];
},
正文：新选项卡视图(
儿童：[
新建统计数据页（），
新建历史页面（），
],
控制器：\ tab控制器，
),
),
);

示例来自。

导入“包：颤振/material.dart”；
导入“package:flatter/rendering.dart”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（），
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态
使用SingleTickerProviderStateMixin{
bool\u showAppbar=true；
ScrollController_scrollBottomBarController=新的ScrollController（）；
bool-isScrollingDown=false；
bool_show=true；
双层底杆高度=75；
双底巴罗偏移=0；
@凌驾
void initState（）{
super.initState（）；
myScroll（）；
}
@凌驾
无效处置（）{
super.dispose（）；
_scrollBottomBarController.RemovelListener（（）{}）；
super.dispose（）；
}
void showBottomBar（）{
设置状态（）{
_show=true；
});
}
void hideBottomBar（）{
设置状态（）{
_show=false；
});
}
void myScroll（）异步{
_scrollBottomBarController.addListener（（）{
if（_scrollBottomBarController.position.userScrollDirection==
滚动方向（反向）{
如果（！IsCrollingDown）{
isScrollingDown=真；
_showAppbar=false；
hideBottomBar（）；
}
}
if（_scrollBottomBarController.position.userScrollDirection==
滚动方向（前进）{
如果（IsCrollingdown）{
isScrollingDown=假；
_showAppbar=true；
showBottomBar（）；
}
}
});
}
Widget ContainerContent（）{
返回容器(
身高：50.0，
颜色：Colors.cyancent，
边距：所有边集（8.0），
宽度：MediaQuery.of（context）.size.width-100，
子项：居中（子项：文本（'项目1'，
样式：TextStyle(
字体大小：14.0，
),)),
);
}
小部件主体（）{
返回列表视图(
控制器：_\n控制器，
儿童：[
ContainerContent（），
ContainerContent（），
ContainerContent（），
ContainerContent（），
ContainerContent（），
ContainerContent（），
ContainerContent（），
ContainerContent（），
ContainerContent（），
ContainerContent（），
],
);
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:\u showAppbar
？AppBar(
标题：文本（“我的任务”），
)
：首选尺寸(
子级：容器（），
首选大小：大小（0.0,0.0），
),
底部导航栏：容器(
高度：底部高度，
宽度：MediaQuery.of（context）.size.width，
孩子:"秀"
？底部导航栏(
currentIndex:0，//点击新选项卡时将设置此项
项目：[
底部导航气压计(
图标：新图标（Icons.home），
标题：新文本（“主页”），
),
底部导航气压计(
图标：新图标（Icons.mail），
标题：新文本（“消息”），
),
底部导航气压计(
图标：图标（Icons.person），标题：文本（'Profile'））
],
)
：容器(
颜色：颜色，白色，
宽度：MediaQuery.of（context）.size.width，
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

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

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  bool _showAppbar = true;
  ScrollController _scrollBottomBarController = new ScrollController();
  bool isScrollingDown = false;
  bool _show = true;
  double bottomBarHeight = 75;
  double _bottomBarOffset = 0;

  @override
  void initState() {
    super.initState();
    myScroll();    
  }

  @override
  void dispose() {
    super.dispose();
    _scrollBottomBarController.removeListener(() {});
    super.dispose();
  }

  void showBottomBar() {
    setState(() {
      _show = true;
    });
  }

  void hideBottomBar() {
    setState(() {
      _show = false;
    });
  }

  void myScroll() async {
    _scrollBottomBarController.addListener(() {
      if (_scrollBottomBarController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        if (!isScrollingDown) {
          isScrollingDown = true;
          _showAppbar = false;
          hideBottomBar();
        }
      }
      if (_scrollBottomBarController.position.userScrollDirection ==
          ScrollDirection.forward) {
        if (isScrollingDown) {
          isScrollingDown = false;
          _showAppbar = true;
          showBottomBar();
        }
      }
    });
  }

  Widget containterContent(){
    return Container(
      height: 50.0,
      color: Colors.cyanAccent,
      margin: EdgeInsets.all(8.0),
      width: MediaQuery.of(context).size.width - 100,
      child: Center(child: Text('Item 1',
        style: TextStyle(
          fontSize: 14.0,
        ),)),
    );
  }

  Widget body() {
    return ListView(
      controller: _scrollBottomBarController,
      children: <Widget>[
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),
        containterContent(),

      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppbar
          ? AppBar(
        title: Text('My Tasks'),
      )
          : PreferredSize(
        child: Container(),
        preferredSize: Size(0.0, 0.0),
      ),
      bottomNavigationBar: Container(
        height: bottomBarHeight,
        width: MediaQuery.of(context).size.width,
        child: _show
            ?BottomNavigationBar(
          currentIndex: 0, // this will be set when a new tab is tapped
          items: [
            BottomNavigationBarItem(
              icon: new Icon(Icons.home),
              title: new Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: new Icon(Icons.mail),
              title: new Text('Messages'),
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.person), title: Text('Profile'))
          ],
        )
            : Container(
          color: Colors.white,
          width: MediaQuery.of(context).size.width,
        ),
      ),

      body: body(
      ),

    );
  }
}

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

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

class CustomSliverAppbar extends StatefulWidget {
  @override
  _CustomSliverAppbarState createState() => _CustomSliverAppbarState();
}

class _CustomSliverAppbarState extends State<CustomSliverAppbar>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(
      initialIndex: 0,
      length: 2,
      vsync: this,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        floatHeaderSlivers: true,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: Text(
                "WhatsApp type sliver appbar",
              ),
              centerTitle: true,
              pinned: true,
              floating: true,
              bottom: TabBar(
                  indicatorColor: Colors.black,
                  labelPadding: const EdgeInsets.only(
                    bottom: 16,
                  ),
                  controller: _tabController,
                  tabs: [
                    Text("TAB A"),
                    Text("TAB B"),
                  ]),
            ),
          ];
        },
        body: TabBarView(
          controller: _tabController,
          children: [
            TabA(),
            const Center(
              child: Text('Display Tab 2',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
}

class TabA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      child: ListView.separated(
        separatorBuilder: (context, child) => Divider(
          height: 1,
        ),
        padding: EdgeInsets.all(0.0),
        itemCount: 30,
        itemBuilder: (context, i) {
          return Container(
            height: 100,
            width: double.infinity,
            color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
          );
        },
      ),
    );
  }
}