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

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

navi_bar_flutter

navi_bar_flutter 是一个可自定义的底部导航栏插件，它使用简单的动画和主题颜色，并且包含了一些预设样式。

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies: 
  navi_bar_flutter: ^1.0.8 # 最新版本

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

如何使用

在你的 Scaffold 中使用 [NaviBar] 作为 bottomNavigationBar。

bottomNavigationBar: NaviBar(
  type: NaviBarType.rounded, // 设置导航栏类型
  selectedIndex: _selectedIndex, // 当前选中的索引
  items: items, // 导航栏项列表
  onTap: (index) { // 点击事件处理
    setState(() {
      _selectedIndex = index;
    });
  },
)

NaviBar 属性

NaviBarItem 属性

完整示例代码

以下是一个完整的示例代码，展示如何使用 navi_bar_flutter。

import 'package:flutter/material.dart';
import 'package:navi_bar_flutter/navi_bar_flutter.dart'; // 引入插件
import 'Welcome.dart'; // 页面组件
import 'hello.dart';
import 'page_3.dart';
import 'page_4.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DemoPage(),
    );
  }
}

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

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

class _DemoPageState extends State<DemoPage> {
  /// 定义当前选中的索引
  int _selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo Page'),
        leading: Icon(Icons.catching_pokemon),
      ),
      
      /// 使用 NaviBar 作为底部导航栏
      bottomNavigationBar: NaviBar(
        type: NaviBarType.basic, // 导航栏类型
        selectedIndex: _selectedIndex, // 当前选中的索引
        items: items, // 导航栏项列表
        onTap: (index) { // 点击事件处理
          setState(() {
            _selectedIndex = index;
          });
        },
      ),

      /// 根据选中的索引切换页面
      body: items[_selectedIndex].page,
    );
  }
}

/// 创建 NaviBarItem 列表
List<NaviBarItem> items = [
  NaviBarItem(
    icon: Icons.house, // 图标
    label: 'Home', // 标签
    page: Hello(), // 对应的页面
  ),
  NaviBarItem(
    icon: Icons.download, // 图标
    label: 'Download', // 标签
    page: Welcome(), // 对应的页面
  ),
  NaviBarItem(
    icon: Icons.account_circle, // 图标
    label: 'Account', // 标签
    page: Page3(), // 对应的页面
  ),
  NaviBarItem(
    icon: Icons.folder, // 图标
    label: 'Files', // 标签
    page: Page4(), // 对应的页面
  ),
];