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

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

DNavigationBar

本Flutter插件包含了一个用于应用底部导航栏（BottomNavigationBar）。

安装

要安装该插件，你需要在pubspec.yaml文件中添加以下依赖项：

dependencies:
  d_navigation_bar: ^0.0.1

然后运行：

flutter pub get

或者直接在终端输入：

flutter pub add d_navigation_bar

使用

首先，需要导入插件包：

import 'package:d_navigation_bar/d_navigation_bar.dart';

功能特性

• 可定制的外观：DNavigationBar允许你自定义底部导航栏的颜色、图标和文本。
• 动态项目更改：根据你的应用程序逻辑，可以轻松地动态更改底部导航栏中的项目。
• 点击事件处理：处理底部导航栏项目的点击事件，以便在不同屏幕之间导航。
• 响应式设计：导航栏经过设计，可以在不同屏幕尺寸上无缝工作。
• 简单集成：通过提供的包简单地将该插件集成到你的Flutter应用程序中。

示例代码

以下是一个完整的示例代码，展示了如何使用d_navigation_bar插件来创建一个具有多个页面的底部导航栏应用。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

class ExamplePage extends StatefulWidget {
  const ExamplePage({super.key});

  [@override](/user/override)
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  final DNavigationBarController dNavigationBarController = DNavigationBarController(currentIndex: 0);

  [@override](/user/override)
  void initState() {
    super.initState();
    dNavigationBarController.appBars = appBars;
    dNavigationBarController.pages = pages;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: dNavigationBarController.appBar,
      body: dNavigationBarController.page,
      bottomNavigationBar: DNavigationBar(
        onChanged: (index){
          setState(() {});
        },
        controller: dNavigationBarController,
        items: [
          DNavigationBarItem(
            label: '首页',
            icon: const Icon(Icons.home_filled),
            activeIcon: const Icon(Icons.home, color: Colors.blue),
          ),
          DNavigationBarItem(
            label: '收藏',
            icon: const Icon(Icons.bookmark_border),
            activeIcon: const Icon(Icons.bookmark, color: Colors.blue),
          ),
          DNavigationBarItem(
            label: '搜索',
            icon: const Icon(Icons.search),
            activeIcon: const Icon(Icons.search, color: Colors.blue),
          ),
          DNavigationBarItem(
            label: '设置',
            icon: const Icon(Icons.settings_outlined),
            activeIcon: const Icon(Icons.settings, color: Colors.blue),
          ),
          DNavigationBarItem(
            label: '个人中心',
            icon: const Icon(Icons.person_outlined),
            activeIcon: const Icon(Icons.person, color: Colors.blue),
          )
        ],
      ),
    );
  }
}

const List<Widget> pages = [
  Center(child: Text('首页')),
  Center(child: Text('收藏')),
  Center(child: Text('搜索')),
  Center(child: Text('设置')),
  Center(child: Text('个人中心')),
];

List<PreferredSizeWidget> appBars = [
  AppBar(
      title: const Text("首页", style: TextStyle(fontWeight: FontWeight.bold)),
      backgroundColor: Colors.amber,
      centerTitle: true
  ),
  AppBar(
    title: const Text("收藏", style: TextStyle(fontWeight: FontWeight.bold)),
    backgroundColor: Colors.amber,
    centerTitle: true,
  ),
  AppBar(
    title: const Text("搜索", style: TextStyle(fontWeight: FontWeight.bold)),
    backgroundColor: Colors.amber,
    centerTitle: true,
  ),
  AppBar(
    title: const Text("设置", style: TextStyle(fontWeight: FontWeight.bold)),
    backgroundColor: Colors.amber,
    centerTitle: true,
  ),
  AppBar(
    title: const Text("个人中心", style: TextStyle(fontWeight: FontWeight.bold)),
    backgroundColor: Colors.amber,
    centerTitle: true,
  )
];