Flutter自定义导航栏插件own_navbar的使用

简介

own_navbar 是一个用于创建响应式导航栏的 Flutter 插件。它可以稳定地在任何移动平台上运行，并且安装简单。

依赖添加：

own_navbar: any

开始使用

以下是暗模式和亮模式的预览图：

最小化代码示例

以下是最小化的代码实现：

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<NavBarItem> navItems = [
    NavBarItem(
      elementIcon: Icons.home,
      elementName: "Home Page",
      navigationId: 'home',
    ),
    NavBarItem(
      elementIcon: Icons.add_alert,
      elementName: "Alerts",
      navigationId: 'alert',
    ),
    NavBarItem(
      elementIcon: Icons.add,
      elementName: "Add Feed",
      navigationId: 'feed',
    ),
    NavBarItem(
      elementIcon: Icons.call,
      elementName: "Contact",
      navigationId: 'contact',
    ),
    NavBarItem(
      elementIcon: Icons.person,
      elementName: "Profile",
      navigationId: 'profile',
    ),
  ];

  void onItemClicked(int index, String navId) {
    print('Clicked index is $index \nClicked NavId is $navId');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Main Content"),
      ),
      bottomNavigationBar: BottomNavbar(
        navItems: navItems,
        height: MediaQuery.of(context).size.height / 18,
        itemClicked: onItemClicked,
      ),
    );
  }
}

属性描述

以下是 BottomNavbar 的主要属性及其描述：

1. navItems
   类型：List<NavBarItem>
   功能：用于创建导航栏项，支持三种类型：带图标和文字、仅图标、仅文字。

   示例代码：

   NavBarItem(
     elementIcon: Icons.home,
     elementName: "Home Page",
     navigationId: 'home',
   ),
   

2. height
   类型：double
   功能：设置底部导航栏的高度。建议使用 MediaQuery.of(context).size.height / 18 来动态调整高度，以适应不同设备。

   示例代码：

   height: MediaQuery.of(context).size.height / 18,
   

3. itemClicked
   类型：Function(int index, String navId)
   功能：当用户点击导航栏项时触发的回调函数，返回点击项的索引和对应的 navigationId。

   示例代码：

   itemClicked: (int index, String navId) {
     print('Clicked index is $index \nClicked NavId is $navId');
   },
   

4. 其他属性
   own_navbar 提供了许多其他属性，例如颜色、背景色等。可以查看 pubspec.yaml 文件并添加依赖来进一步探索这些属性。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 own_navbar 创建一个响应式导航栏：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<NavBarItem> navItems = [
    NavBarItem(
      elementIcon: Icons.home,
      elementName: "Home Page",
      navigationId: 'home',
    ),
    NavBarItem(
      elementIcon: Icons.add_alert,
      elementName: "Alerts",
      navigationId: 'alert',
    ),
    NavBarItem(
      elementIcon: Icons.add,
      elementName: "Add Feed",
      navigationId: 'feed',
    ),
    NavBarItem(
      elementIcon: Icons.call,
      elementName: "Contact",
      navigationId: 'contact',
    ),
    NavBarItem(
      elementIcon: Icons.person,
      elementName: "Profile",
      navigationId: 'profile',
    ),
  ];

  void onItemClicked(int index, String navId) {
    print('Clicked index is $index \nClicked NavId is $navId');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Own Navbar Example"),
      ),
      body: Center(
        child: Text("Main Content"),
      ),
      bottomNavigationBar: BottomNavbar(
        navItems: navItems,
        height: MediaQuery.of(context).size.height / 18,
        itemClicked: onItemClicked,
      ),
    );
  }
}