Flutter底部导航栏插件bottom_nav_bar的使用

Flutter底部导航栏插件bottom_nav_bar的使用

简介

bottom_nav_bar 是一个易于使用的干净底部导航栏。

预览

Preview 1	Preview 2

Preview 3

可用的自定义选项

BottomNavBar

• iconSize - 项目图标的大小。
• items - 导航项，项目数量应在3到5之间。
• selectedIndex - 当前选中项目的索引。默认为零。
• onItemSelected - 监听项目点击事件，提供选中项目的索引。
• backgroundColor - 底部导航栏的背景颜色。
• showElevation - 如果为false，则移除AppBar的阴影。
• mainAxisAlignment - 用于更改项目水平对齐方式。主要用于只有两个项目且需要居中对齐时。
• curve - 自定义项目变化动画的参数。
• containerHeight - 更改导航栏的高度。
• containerPadding - 更改导航栏的内边距。

BottomNavBarItem

• icon - 项目的图标。
• title - 选中此项目时出现在图标的文本。
• activeColor - 激活项目的图标和文本颜色。
• inactiveColor - 未激活项目的图标颜色。
• activeBackgroundColor - 激活项目的背景颜色。
• inactiveBackgroundColor - 未激活项目的背景颜色。

基本用法

import 'package:bottom_nav_bar/bottom_nav_bar.dart';

bottomNavigationBar: BottomNavBar(
  showElevation: true,
  selectedIndex: _currentIndex,
  onItemSelected: (index) {
    setState(() => _currentIndex = index);
  },
  items: [
    BottomNavBarItem(
      title: 'Home',
      icon: const Icon(Icons.home),
      activeColor: Colors.white,
      inactiveColor: Colors.black,
      activeBackgroundColor: Colors.red.shade300,
    ),
    BottomNavBarItem(
      title: 'Profile',
      icon: const Icon(Icons.person),
      activeColor: Colors.white,
      inactiveColor: Colors.black,
      activeBackgroundColor: Colors.blue.shade300,
    ),
    BottomNavBarItem(
      title: 'Message',
      icon: const Icon(Icons.chat_bubble),
      inactiveColor: Colors.black,
      activeColor: Colors.white,
      activeBackgroundColor: Colors.green.shade300,
    ),
    BottomNavBarItem(
      title: 'Settings',
      icon: const Icon(Icons.settings),
      inactiveColor: Colors.black,
      activeColor: Colors.black,
      activeBackgroundColor: Colors.yellow.shade300,
    ),
  ],
)

完整示例

import 'package:bottom_nav_bar/bottom_nav_bar.dart';

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

  [@override](/user/override)
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _currentIndex = 0;

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: _body(),
      bottomNavigationBar: _bottomNavBar(),
    );
  }

  Widget _body() => SizedBox.expand(
        child: IndexedStack(
          index: _currentIndex,
          children: const [
            PageOne(),
            PageTwo(),
            PageThree(),
            PageFour(),
          ],
        ),
      );

  Widget _bottomNavBar() => BottomNavBar(
        showElevation: true,
        selectedIndex: _currentIndex,
        onItemSelected: (index) {
          setState(() => _currentIndex = index);
        },
        items: [
          BottomNavBarItem(
            title: 'Home',
            icon: const Icon(Icons.home),
            activeColor: Colors.white,
            inactiveColor: Colors.black,
            activeBackgroundColor: Colors.red.shade300,
          ),
          BottomNavBarItem(
            title: 'Profile',
            icon: const Icon(Icons.person),
            activeColor: Colors.white,
            inactiveColor: Colors.black,
            activeBackgroundColor: Colors.blue.shade300,
          ),
          BottomNavBarItem(
            title: 'Message',
            icon: const Icon(Icons.chat_bubble),
            inactiveColor: Colors.black,
            activeColor: Colors.white,
            activeBackgroundColor: Colors.green.shade300,
          ),
          BottomNavBarItem(
            title: 'Settings',
            icon: const Icon(Icons.settings),
            inactiveColor: Colors.black,
            activeColor: Colors.black,
            activeBackgroundColor: Colors.yellow.shade300,
          ),
        ],
      );
}

示例代码

import 'package:example/root_page.dart';
import 'package:flutter/material.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(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const RootPage(),
    );
  }
}