滚动时如何隐藏 BottomNavigationBar - Flutter

Posted 2023-02-23

【中文标题】滚动时如何隐藏 BottomNavigationBar - Flutter

【英文标题】：How to hide BottomNavigationBar when scrolling - Flutter

【发布时间】：2019-05-24 15:19:52

【问题描述】：

当用户向下或向上滚动时，我需要在 Flutter 中实现 BottomNavigationBar 的隐藏/显示功能。 拜托，如果你知道怎么做或者有怎么做的例子并可以分享，我很感激你的帮助！

Here is the link of my question there in github

我想要的一个例子

【问题讨论】：

尝试使用 ScrollController。这个链接可以帮助你medium.com/@diegoveloper/…

您可以将滚动监听器添加到您的列表视图中，检查滚动速度，然后使用动画转换根据滚动来翻译您的底部导航器

谢谢你，我会尝试应用你的想法！

ScrollController 是正确的答案 - 为什么在 cmets 中，而不是在答案字段中？

@AndreiVolgin 你有例子给我们看吗？

【参考方案1】：

此代码用于通过动画隐藏滚动隐藏

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(
      debugShowCheckedModeBanner: false,
      home: WorkoutDetailsPage(Workout()),
    );
  


class Exercise 
  String name;
  Exercise(@required name) 
    this.name = name;
  


class Workout 
  String name = "my name";


class WorkoutDetailsPage extends StatefulWidget 
  Workout _workout = Workout();

  WorkoutDetailsPage(this._workout);

  @override
  _WorkoutDetailsPageState createState() => _WorkoutDetailsPageState();



class _WorkoutDetailsPageState extends State<WorkoutDetailsPage> 
  final List<Exercise> exercises = [
    Exercise(name: "Push Ups"),
    Exercise(name: "Bench press"),
    Exercise(name: "Pull ups"),
    Exercise(name: "Press ups"),
    Exercise(name: "Crunches"),
    Exercise(name: "Sit ups"),
    Exercise(name: "BIceps curl"),
    Exercise(name: "Something else"),
    Exercise(name: "Push Ups"),
    Exercise(name: "Bench press"),
    Exercise(name: "Pull ups"),
    Exercise(name: "Press ups"),
    Exercise(name: "Crunches"),
    Exercise(name: "Sit ups"),
    Exercise(name: "BIceps curl"),
    Exercise(name: "Something else"),
    Exercise(name: "Push Ups"),
    Exercise(name: "Bench press"),
    Exercise(name: "Pull ups"),
    Exercise(name: "Press ups"),
    Exercise(name: "Crunches"),
    Exercise(name: "Sit ups"),
    Exercise(name: "BIceps curl"),
    Exercise(name: "Something else"),
    Exercise(name: "Push Ups"),
    Exercise(name: "Bench press"),
    Exercise(name: "Pull ups"),
    Exercise(name: "Press ups"),
    Exercise(name: "Crunches"),
    Exercise(name: "Sit ups"),
    Exercise(name: "BIceps curl"),
    Exercise(name: "Something else"),
    Exercise(name: "Push Ups"),
    Exercise(name: "Bench press"),
    Exercise(name: "Pull ups"),
    Exercise(name: "Press ups"),
    Exercise(name: "Crunches"),
    Exercise(name: "Sit ups"),
    Exercise(name: "BIceps curl"),
    Exercise(name: "Something else"),
  ];

  ScrollController _hideButtonController;

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

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: _isVisible
          ? FloatingActionButton(
              backgroundColor: Colors.blue,
              elevation: 12,
              onPressed: () ,
            )
          : null,
      bottomNavigationBar: AnimatedContainer(
        duration: Duration(milliseconds: 200),
        height: _isVisible ? 60 : 0.0,
        child: BottomAppBar(
          elevation: 8,
          shape: CircularNotchedRectangle(),
          color: Colors.blue,
          child: Container(
            height: 60,
            child: Row(
              children: <Widget>[Text("data")],
            ),
          ),
        ),
      ),
      body: CustomScrollView(
        controller: _hideButtonController,
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 150,
            pinned: true,
            floating: true,
            snap: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text(widget._workout.name),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(buildSliverListItem,
                childCount: exercises.length),
          ),
        ],
      ),
    );
  

  Widget buildSliverListItem(BuildContext context, int index) 
    return Center(
      child: ListTile(
        title: Text(exercises[index].name),
      ),
    );
  

或者你https://medium.com/nonstopio/hide-or-show-app-bar-and-bottom-navigation-bar-while-scrolling-in-flutter-3994f78e52c0