Flutter自定义底部导航栏插件customise_bottom_bar的使用

在Flutter应用开发中，底部导航栏是一个常见的UI组件。本文将介绍如何使用customise_bottom_bar插件来自定义底部导航栏，并通过一个完整的示例展示其用法。

使用方法

customise_bottom_bar插件允许开发者轻松地为应用程序添加底部导航功能。通过配置不同的图标和页面，可以实现自定义的导航栏样式。

示例代码

以下是一个完整的示例，展示了如何使用customise_bottom_bar插件来创建自定义底部导航栏。

项目结构

首先确保你的项目结构包含必要的资源文件（如图片）和页面组件。

lib/
├── main.dart
├── tab_1_route.dart
├── tab_2_route.dart
├── tab_3_route.dart
├── tab_4_route.dart
└── tab_5_route.dart

main.dart

这是应用程序的入口文件，定义了主页面和导航逻辑。

import 'package:customise_bottom_bar/model/tab_bar_data.dart';
import 'package:example/tab_1_route.dart';
import 'package:example/tab_2_route.dart';
import 'package:example/tab_3_route.dart';
import 'package:example/tab_4_route.dart';
import 'package:example/tab_5_route.dart';
import 'package:flutter/material.dart';
import 'package:customise_bottom_bar/customise_bottom_bar.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<TabIconData> tabIconsList = [];

  [@override](/user/override)
  void initState() {
    tabIconsList = [
      TabIconData(
        imagePath: 'assets/fitness_app/tab_1.png',
        selectedImagePath: 'assets/fitness_app/tab_1s.png',
        index: 0,
        isSelected: true,
        animationController: null,
      ),
      TabIconData(
        imagePath: 'assets/fitness_app/tab_2.png',
        selectedImagePath: 'assets/fitness_app/tab_2s.png',
        index: 1,
        isSelected: false,
        animationController: null,
      ),
      TabIconData(
        imagePath: 'assets/fitness_app/tab_3.png',
        selectedImagePath: 'assets/fitness_app/tab_3s.png',
        index: 2,
        isSelected: false,
        animationController: null,
      ),
      TabIconData(
        imagePath: 'assets/fitness_app/tab_4.png',
        selectedImagePath: 'assets/fitness_app/tab_4s.png',
        index: 3,
        isSelected: false,
        animationController: null,
      ),
    ];
    super.initState();
  }

  Widget tabBody = Tab1();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("自定义底部导航栏"),
      ),
      body: tabBody, // 根据选择的索引动态加载不同的页面
      bottomNavigationBar: CustomiseBottomBar(
        list: [Tab1(), Tab2(), Tab4(), Tab5()], // 底部导航栏的页面列表
        floting: Tab3(), // 浮动按钮（可选）
        addClick: () {}, // 添加按钮点击事件（可选）
        changeIndex: (index) {
          if (index == 0) {
            setState(() {
              tabBody = Tab1(); // 切换到第一个页面
            });
          } else if (index == 1) {
            setState(() {
              tabBody = Tab2(); // 切换到第二个页面
            });
          } else if (index == 2) {
            setState(() {
              tabBody = Tab3(); // 切换到第三个页面
            });
          } else if (index == 3) {
            setState(() {
              tabBody = Tab4(); // 切换到第四个页面
            });
          }
        },
        tabIconsList: tabIconsList, // 自定义图标列表
      ),
    );
  }
}

页面组件

每个页面组件（如Tab1、Tab2等）可以是一个简单的StatelessWidget或StatefulWidget，具体实现取决于需求。

// 示例页面组件 Tab1
class Tab1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text("页面 1", style: TextStyle(fontSize: 24)),
    );
  }
}

// 示例页面组件 Tab2
class Tab2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text("页面 2", style: TextStyle(fontSize: 24)),
    );
  }
}

// 其他页面组件类似...