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

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

bottom_nav 是一个具有扩展标题和圆角背景的底部导航栏。该设计灵感来源于 Dribbble 上的设计：[此处链接已移除]。

开始使用

本项目是一个 Dart 包的起点，该包是一个包含可以轻松跨多个 Flutter 或 Dart 项目的共享代码的库模块。

要开始使用 Flutter，请参阅我们的 在线文档，其中提供了教程、示例、移动开发指南和完整的 API 参考。

示例代码

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

import 'package:flutter/material.dart';
import 'package:bottom_nav/bottom_nav.dart'; // 导入底栏插件

void main() => runApp(MyApp()); // 主函数

class MyApp extends StatelessWidget { // 主应用类
  [@override](/user/override)
  Widget build(BuildContext context) { // 构建方法
    return MaterialApp(
      title: '底部导航栏示例', // 应用标题
      theme: ThemeData( // 主题配置
        primaryColor: Colors.white, // 主颜色为白色
      ),
      debugShowCheckedModeBanner: false, // 禁用调试横幅
      home: MyHome(), // 主页面
    );
  }
}

class MyHome extends StatefulWidget { // 主页面状态管理类
  [@override](/user/override)
  _MyHomeState createState() => _MyHomeState(); // 创建状态对象
}

class _MyHomeState extends State<MyHome> { // 主页面状态类
  int currentTab = 0; // 当前选中标签页索引

  [@override](/user/override)
  Widget build(BuildContext context) { // 构建方法
    return Scaffold(
      appBar: AppBar( // 应用程序顶部栏
        title: Text("示例"), // 标题
      ),
      body: Container(), // 主页面主体内容
      bottomNavigationBar: BottomNav( // 底部导航栏
        index: currentTab, // 当前选中索引
        backgroundColor: Colors.white, // 背景颜色
        showElevation: true, // 显示阴影
        navBarHeight: 75.0, // 导航栏高度
        radius: 30.0, // 圆角半径
        onTap: (i) { // 点击事件处理
          setState(() { // 更新状态
            currentTab = i;
          });
        },
        items: [ // 导航项列表
          BottomNavItem( // 第一个导航项
              icon: Icons.home, // 图标
              label: "首页", // 标签
              selectedColor: Colors.amber), // 选中时的颜色
          BottomNavItem( // 第二个导航项
              icon: Icons.favorite, // 图标
              label: "喜欢", // 标签
              selectedColor: Colors.pink), // 选中时的颜色
          BottomNavItem( // 第三个导航项
              icon: Icons.search, // 图标
              label: "搜索", // 标签
              selectedColor: Colors.blue), // 选中时的颜色
          BottomNavItem( // 第四个导航项
              icon: Icons.person, // 图标
              label: "个人资料", // 标签
              selectedColor: Colors.black), // 选中时的颜色
        ],
      ),
    );
  }
}

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

1 回复

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


在 Flutter 中，bottom_nav 插件是一个用于创建底部导航栏的第三方库。它提供了简单易用的 API，可以帮助你快速实现底部导航栏功能。下面是使用 bottom_nav 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 bottom_nav 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  bottom_nav: ^1.0.0  # 请使用最新版本

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

2. 导入库

在你的 Dart 文件中导入 bottom_nav 库：

import 'package:bottom_nav/bottom_nav.dart';

3. 创建底部导航栏

接下来，你可以使用 BottomNav 组件来创建底部导航栏。以下是一个简单的示例：

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

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

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

  final List<Widget> _pages = [
    Page1(),
    Page2(),
    Page3(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Nav Example'),
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNav(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavItem(icon: Icons.home, title: 'Home'),
          BottomNavItem(icon: Icons.business, title: 'Business'),
          BottomNavItem(icon: Icons.school, title: 'School'),
        ],
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Home Page'),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Business Page'),
    );
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('School Page'),
    );
  }
}

4. 运行应用

现在，你可以运行你的 Flutter 应用，看到一个带有底部导航栏的界面。点击底部导航栏的图标，可以在不同的页面之间切换。

5. 自定义导航栏

bottom_nav 插件允许你自定义导航栏的外观。你可以通过传递不同的参数来调整导航栏的颜色、图标大小、文本样式等。

例如，你可以通过 activeColor 和 inactiveColor 来设置选中和未选中项的颜色：

bottomNavigationBar: BottomNav(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  items: [
    BottomNavItem(icon: Icons.home, title: 'Home'),
    BottomNavItem(icon: Icons.business, title: 'Business'),
    BottomNavItem(icon: Icons.school, title: 'School'),
  ],
  activeColor: Colors.blue,
  inactiveColor: Colors.grey,
),
回到顶部