Flutter隐藏底部导航栏插件scroll_to_hide_bottom_navigation_bar的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter隐藏底部导航栏插件scroll_to_hide_bottom_navigation_bar的使用

scroll_to_hide_bottom_navigation_bar

一个可以包裹你的底部导航栏的小部件包,让你在滚动时隐藏底部导航栏。

特性

  • 滚动时隐藏底部导航栏。
  • 可以更改隐藏动画。

开始使用

要使用此插件,在你的 pubspec.yaml 文件中添加 scroll_to_hide_bottom_navigation_bar 作为依赖项。

使用方法

最小示例

ScrollToHideBottomNavigationBar()

自定义设置

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  ScrollController _scrollController = ScrollController();

  [@override](/user/override)
  void initState() {
    _scrollController = ScrollController();
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomePage'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return Text("${index + 1}. Hello");
        },
      ),
      bottomNavigationBar: ScrollToHideBottomNavigationBar(
        scrollController: _scrollController,
        duration: const Duration(milliseconds: 1000),
        children: [
          BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
                backgroundColor: Colors.blue,
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.business),
                label: 'Business',
                backgroundColor: Colors.green,
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.school),
                label: 'School',
                backgroundColor: Colors.purple,
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.settings),
                label: 'Settings',
                backgroundColor: Colors.pink,
              ),
            ],
            currentIndex: _selectedIndex,
            selectedItemColor: Colors.amber[800],
            onTap: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
          ),
        ],
      ),
    );
  }
}

更多关于Flutter隐藏底部导航栏插件scroll_to_hide_bottom_navigation_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter隐藏底部导航栏插件scroll_to_hide_bottom_navigation_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用scroll_to_hide_bottom_navigation_bar插件的一个详细代码示例。这个插件允许你在用户滚动页面时隐藏和显示底部导航栏。

首先,确保你的pubspec.yaml文件中包含了scroll_to_hide_bottom_navigation_bar依赖:

dependencies:
  flutter:
    sdk: flutter
  scroll_to_hide_bottom_navigation_bar: ^2.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来,在你的Flutter应用中,你可以按照以下步骤使用这个插件:

  1. 导入插件

在你的Dart文件中导入插件:

import 'package:scroll_to_hide_bottom_navigation_bar/scroll_to_hide_bottom_navigation_bar.dart';
  1. 设置布局

下面是一个完整的示例,展示了如何使用ScrollToHideBottomNavigationBar来包裹你的页面和底部导航栏:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Profile Page')),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ScrollConfiguration(
      behavior: MyCustomScrollBehavior(),
      child: ScrollToHideBottomNavigationBar(
        child: Scaffold(
          body: _widgetOptions[_selectedIndex],
          bottomNavigationBar: BottomNavigationBar(
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: 'Search',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Profile',
              ),
            ],
            currentIndex: _selectedIndex,
            onTap: _onItemTapped,
          ),
        ),
      ),
    );
  }
}

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<MaterialScrollController> get controllers => _controllers;
  final Set<MaterialScrollController> _controllers = {};

  @override
  Widget buildViewportChrome(
      BuildContext context, Widget child, AxisDirection axisDirection) {
    switch (axisDirection) {
      case AxisDirection.down:
      case AxisDirection.up:
        return child;
      case AxisDirection.left:
      case AxisDirection.right:
        return MediaQuery.removePadding(
          context: context,
          removeTop: true,
          removeBottom: true,
          child: child,
        );
    }
  }
}

在这个示例中:

  • ScrollToHideBottomNavigationBar包裹了Scaffold,其中Scaffold包含一个页面主体和一个底部导航栏。
  • MyCustomScrollBehavior类用于自定义滚动行为,这个步骤通常是可选的,但可以帮助你处理某些滚动相关的自定义行为。
  • 页面主体根据_selectedIndex来显示不同的页面。

当用户滚动页面时,底部导航栏将根据滚动行为自动隐藏和显示。

注意:在实际应用中,你可能需要根据具体需求调整这个示例,比如处理滚动事件的监听、动画效果等。

回到顶部