在 Scroll Flutter 上隐藏 Appbar？

Posted 2023-05-07

【中文标题】在 Scroll Flutter 上隐藏 Appbar？

【英文标题】：Hide Appbar on Scroll Flutter?

【发布时间】：2019-01-27 14:48:13

【问题描述】：

考虑这张图片。如您所见，它有一个应用栏，而应用栏有选项卡式按钮。 我正在尝试为 appbar 设置动画，以便它在向上滚动时隐藏，并且仅显示选项卡按钮，而在向上滚动时，appbar 会出现。请帮帮我。抱歉英语不好，不是美国人，我也不是英语

【问题讨论】：

您可能应该在屏幕截图中编辑手机号码列表。

【参考方案1】：

如果我理解正确，下面的代码应该让应用栏在滚动时隐藏，而 TabBar 保持可见：

空安全码：

class _SomePageState extends State<SomePage> with SingleTickerProviderStateMixin 
  late final TabController _tabController;

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

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) 
          return <Widget>[
            SliverAppBar(
              title: Text('Weight Tracker'),
              pinned: true,
              floating: true,
              forceElevated: innerBoxIsScrolled,
              bottom: TabBar(
                tabs: <Tab>[
                  Tab(text: 'STATISTICS'),
                  Tab(text: 'HISTORY'),
                ],
                controller: _tabController,
              ),
            ),
          ];
        ,
        body: TabBarView(
          controller: _tabController,
          children: <Widget>[
            StatisticsPage(),
            HistoryPage(),
          ],
        ),
      ),
    );
  

来自this post的示例。

【讨论】：

非常感谢先生

你们如何制作 gif 截图？

我使用adb shell screenrecord，然后使用adb pull，然后我使用ezgif.com/video-to-gif在线将mp4转换为gif

嘿@MarcinSzałek，当我滚动一页（例如统计）时，另一页也会滚动。我该如何避免这种情况？

1. _scrollViewController 是什么？

【参考方案2】：

使用DefaultTabController

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

输出：

【参考方案3】：

我建议你必须通过 SliverAppBar 和 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)))
        ])
    );
  

【参考方案4】：

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

    );
  

【讨论】：

欢迎来到 Stack Overflow！虽然此代码 sn-p 可能是解决方案，但including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

感谢您的解决方案！这是唯一一个不使用任何银条的

【参考方案5】：

通过使用带有 NestedScrollView 的 SliverAppbar，我能够制作类似于 WhatsApp 的带有标签栏的浮动应用栏。

在 NestedScrollView 中添加 floatHeaderSliv​​ers: true 和

固定：真，浮动：真，在 SliverAppBar 中

Link to sample code

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

【参考方案6】：

截图：

---

代码：

正如我提到的here，你可以像这样使用NestedScrollView：

@override
Widget build(BuildContext context) 
  return Scaffold(
    body: DefaultTabController(
      length: 2,
      child: NestedScrollView(
        headerSliverBuilder: (context, value) 
          return [
            SliverAppBar(
              title: Text('AppBar'),
              pinned: true,
              floating: true,
              bottom: TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.call), text: 'Call'),
                  Tab(icon: Icon(Icons.message), text: 'Message'),
                ],
              ),
            ),
          ];
        ,
        body: TabBarView(
          children: [
            FlutterLogo(),
            FlutterLogo(),
          ],
        ),
      ),
    ),
  );