在Flutter中的滚动条上隐藏底部导航栏

在Flutter中的滚动条上隐藏底部导航栏

本文介绍了在Flutter中的滚动条上隐藏底部导航栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在正文和底部导航栏中有一个博客文章列表.我想在帖子列表向下滚动时用向下滑动的动画隐藏底部导航栏,在向上滚动时可以向上滑动的动画看到.怎么做?

I have a list of blog posts in the body and bottom navigation bar. I want to hide bottom navigation bar with a slide down animation when the posts list is scrolled down and visible with a slide up animation when scrolled up. How to do it?

推荐答案

此解决方案只是解决此问题的方法.可能会有一些不利的变化.

This solution is just a workaround to this problem.There may be some detrimental changes.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.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(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _hideButtonController;

  var _isVisible;
  @override
  initState() {
    super.initState();
    _isVisible = true;
    _hideButtonController = new ScrollController();
    _hideButtonController.addListener(() {
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.reverse) {
       if(_isVisible)
        setState(() {
          _isVisible = false;
          print("**** $_isVisible up");
        });
      }
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.forward) {
        if(!_isVisible)
        setState(() {
          _isVisible = true;
          print("**** $_isVisible down");
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
          child: new CustomScrollView(
        controller: _hideButtonController,
        shrinkWrap: true,
        slivers: <Widget>[
          new SliverPadding(
            padding: const EdgeInsets.all(20.0),
            sliver: new SliverList(
              delegate: new SliverChildListDelegate(
                <Widget>[
                  const Text('I\'m dedicating every day to you'),
                  const Text('Domestic life was never quite my style'),
                  const Text('When you smile, you knock me out, I fall apart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('And I thought I was so smart'),
                  const Text('I realize I am crazy'),
                ],
              ),
            ),
          ),
        ],
      )),
      bottomNavigationBar: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        height: _isVisible ? 60.0 : 0.0,
        child: _isVisible
            ? new BottomNavigationBar(
                type: BottomNavigationBarType.fixed,
                items: [
                  new BottomNavigationBarItem(
                    icon: Icon(Icons.home),
                    title: Text('Home'),
                  ),
                  new BottomNavigationBarItem(
                    icon: Icon(Icons.card_giftcard),
                    title: Text('Offers'),
                  ),
                  new BottomNavigationBarItem(
                    icon: Icon(Icons.account_box),
                    title: Text('Account'),
                  ),
                ],
                currentIndex: 0,

              )
            : Container(
                color: Colors.white,
                width: MediaQuery.of(context).size.width,
              ),
      ),

    );
  }

}

您还可以在此使用条形条:-

Also you can use sliver bar with this :-

import 'package:flutter/material.dart';
import 'package:flutter/rendering.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(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _hideButtonController;

  var _isVisible;
  @override
  initState() {
    super.initState();
    _isVisible = true;
    _hideButtonController = new ScrollController();
    _hideButtonController.addListener(() {
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.reverse) {
        setState(() {
          _isVisible = false;
          print("**** $_isVisible up");
        });
      }
      if (_hideButtonController.position.userScrollDirection ==
          ScrollDirection.forward) {
        setState(() {
          _isVisible = true;
          print("**** $_isVisible down");
        });
      }
    });
  }

  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  TextEditingController searchController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      resizeToAvoidBottomPadding: true,
      drawer: Container(),
      key: scaffoldKey,
      body: NestedScrollView(
        controller: _hideButtonController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: Container(
                child: Card(
                  elevation: 3.0,
                  margin: EdgeInsets.only(top: 10.0),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(2.0))),
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 15.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        GestureDetector(
                          child: Icon(
                            Icons.sort,
                            color: Colors.black54,
                          ),
                          onTap: () {
                            scaffoldKey.currentState.openDrawer();
                          },
                        ),
                        SizedBox(
                          width: 10.0,
                        ),
                        Expanded(
                          child: TextField(
                            controller: searchController,
                            decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: "What are you looking for?"),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            searchController.clear();
                          },
                          child: Icon(
                            Icons.clear,
                            color: Colors.black54,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              elevation: 10.0,
              automaticallyImplyLeading: false,
              expandedHeight: 70,
              floating: true,
              snap: true,
            )
          ];
        },
        body: new ListView(
          children: <Widget>[
            const Text('I\'m dedicating every day to you'),
            const Text('Domestic life was never quite my style'),
            const Text('When you smile, you knock me out, I fall apart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('I realize I am crazy'),
            const Text('I\'m dedicating every day to you'),
            const Text('Domestic life was never quite my style'),
            const Text('When you smile, you knock me out, I fall apart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('And I thought I was so smart'),
            const Text('I realize I am crazy'),
          ],
        ),
      ),

      bottomNavigationBar: AnimatedContainer(
        duration: Duration(seconds: 1),
        height: _isVisible ? 60.0 : 0.0,
        child: _isVisible
            ? AnimatedContainer(
                duration: Duration(milliseconds: 200),
                height: _isVisible ? 60.0 : 0.0,
                child: _isVisible
                    ? new BottomNavigationBar(
                        type: BottomNavigationBarType.fixed,
                        items: [
                          new BottomNavigationBarItem(
                            icon: Icon(Icons.home),
                            title: Text('Home'),
                          ),
                          new BottomNavigationBarItem(
                            icon: Icon(Icons.card_giftcard),
                            title: Text('Offers'),
                          ),
                          new BottomNavigationBarItem(
                            icon: Icon(Icons.account_box),
                            title: Text('Account'),
                          ),
                        ],
                        currentIndex: 0,
                      )
                    : Container(
                        color: Colors.white,
                        width: MediaQuery.of(context).size.width,
                      ),
              )
            : Container(
                color: Theme.of(context).primaryColor,
                width: MediaQuery.of(context).size.width,
              ),
      ),

//                _isVisible
//                  ? bottomNavigationBar()
//                  : Container(
//                      height: 0.0,
//                      width: MediaQuery.of(context).size.width,
//                    ),
    );
  }
}

请评论您对此代码的看法,以便我们改进此代码.

Kindly comment your view on this codes so we can improve this code.

这是从这个答案中摘下来的: Flutter-隐藏FloatingActionButton

this was taken from this answer :-Flutter - Hiding FloatingActionButton

这篇关于在Flutter中的滚动条上隐藏底部导航栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-03 00:53