Flutter自定义底部导航栏插件custom_bottom_navigation_bar的使用

一个可以高度自定义的底部导航栏小部件。

GIF1 GIF1

如何使用它？

Scaffold(
      bottomNavigationBar: CustomBottomNavigationBar(
        items: [
          CustomBottomNavigationBarItem(
            icon: Icons.map,
            title: "Map",
          ),
          CustomBottomNavigationBarItem(
            icon: Icons.near_me,
            title: "Directions",
          ),
          CustomBottomNavigationBarItem(
            icon: Icons.settings,
            title: "Settings",
          ),
        ],
      ),
    );

你还可以添加一个参数 onTap（返回当前索引）来控制 PageController：

onTap: (index) {
          _pageController.animateToPage(index,
              curve: Curves.fastLinearToSlowEaseIn,
              duration: Duration(milliseconds: 600));
        },

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 中使用 custom_bottom_navigation_bar 插件。

example/lib/main.dart

import 'package:custom_bottom_navigation_bar/custom_bottom_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:custom_bottom_navigation_bar/custom_bottom_navigation_bar_item.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TestScreen(),
    );
  }
}

class TestScreen extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() {
    return TestScreenState();
  }
}

class TestScreenState extends State<TestScreen> {
  // 初始化 PageController
  PageController _pageController = PageController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      // 使用 PageView 来管理页面切换
      body: PageView(
        controller: _pageController,
        children: <Widget>[
          // 第一页
          Center(
            child: Icon(
              Icons.map,
              color: Color(0XFF003051),
            ),
          ),
          // 第二页
          Center(
            child: Icon(
              Icons.near_me,
              color: Color(0XFF003051),
            ),
          ),
          // 第三页
          Center(
            child: Icon(
              Icons.shopping_cart,
              color: Color(0XFF003051),
            ),
          ),
        ],
      ),
      // 自定义底部导航栏
      bottomNavigationBar: CustomBottomNavigationBar(
        items: [
          // 第一个导航项
          CustomBottomNavigationBarItem(
            icon: Icons.map,
            title: "Map",
          ),
          // 第二个导航项
          CustomBottomNavigationBarItem(
            icon: Icons.near_me,
            title: "Directions",
          ),
          // 第三个导航项
          CustomBottomNavigationBarItem(
            icon: Icons.settings,
            title: "Settings",
          ),
        ],
        onTap: (index) {
          // 点击时平滑切换到对应的页面
          _pageController.animateToPage(index,
              curve: Curves.fastLinearToSlowEaseIn,
              duration: Duration(milliseconds: 600));
        },
      ),
    );
  }
}

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

1 回复

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


在Flutter中，自定义底部导航栏可以通过多种方式实现。如果你使用了一个名为 custom_bottom_navigation_bar 的插件，以下是一个基本的使用示例。假设你已经将这个插件添加到你的 pubspec.yaml 文件中。

1. 添加依赖

首先，确保你已经在 pubspec.yaml 文件中添加了 custom_bottom_navigation_bar 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_bottom_navigation_bar: ^版本号

然后运行 flutter pub get 来获取依赖。

2. 导入插件

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

import 'package:custom_bottom_navigation_bar/custom_bottom_navigation_bar.dart';
import 'package:custom_bottom_navigation_bar/custom_bottom_navigation_item.dart';

3. 使用 CustomBottomNavigationBar

在你的 Scaffold 中使用 CustomBottomNavigationBar 来创建自定义底部导航栏。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:custom_bottom_navigation_bar/custom_bottom_navigation_bar.dart';
import 'package:custom_bottom_navigation_bar/custom_bottom_navigation_item.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Bottom Navigation Bar'),
      ),
      body: Center(
        child: Text('Selected Index: $_currentIndex'),
      ),
      bottomNavigationBar: CustomBottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          CustomBottomNavigationItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          CustomBottomNavigationItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          CustomBottomNavigationItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
      ),
    );
  }
}
回到顶部