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

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

一个带有方块动画的自定义底部导航栏。这个设计受到了一些早期设计的启发，但以更简化且令人兴奋的方式呈现。

Demo

使用方法

要使用该插件，首先在 pubspec.yaml 文件中添加 custom_bottom_navigation 作为依赖项。

然后，在 Scaffold() 的 bottomNavigationBar: 字段中添加 CustomBottomBoxBar()。你需要提供两个字段：items:（CustomBottomBaxBarItem 列表）和 onIndexChange: 方法。以下是示例代码：

Scaffold(
  bottomNavigationBar: CustomBottomBoxBar(
    inicialIndex: selectedPageIndex,
    onIndexChange: (int index) {
      setState(() {
        selectedPageIndex = index;
      });
    },
    items: [
      CustomBottomBoxBarItem(
          Icons.home_filled,
          Text('Home')),
      CustomBottomBoxBarItem(
          Icons.person,
          Text('Profile')),
    ],
  ),
);

属性

你可以自定义大部分属性，如下所示：

导航栏高度

可以通过 height 参数提供导航栏的高度。

选中项框颜色

可以通过 selectedItemBoxColor 参数提供选中项框的颜色。

未选中项框颜色

可以通过 unselectedItemBoxColor 参数提供未选中项框的颜色。

选中项颜色

可以通过 selectedItemColor 参数提供选中项的颜色。

未选中项颜色

可以通过 unselectedItemColor 参数提供未选中项的颜色。

动画时长

可以通过 duration 参数提供动画时长。

初始索引

可以通过 inicialIndex 参数提供初始索引。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 custom_bottom_navigation 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Bottom Box Navigation Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: const MyHomePage(title: 'Custom Bottom Box Bar'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int selectedPageIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.title),
      ),
      body: Center(
        child: Text('Page Index : $selectedPageIndex'),
      ),
      bottomNavigationBar: CustomBottomBoxBar(
        onIndexChange: (int val) {
          setState(() {
            selectedPageIndex = val;
          });
        },
        inicialIndex: selectedPageIndex,
        items: [
          CustomBottomBoxBarItem(Icons.home_filled, Text('Home')),
          CustomBottomBoxBarItem(Icons.home_max, Text('Max')),
          CustomBottomBoxBarItem(Icons.home_mini, Text('Mini')),
          CustomBottomBoxBarItem(Icons.work_outline_rounded, Text('Work')),
          CustomBottomBoxBarItem(Icons.person, Text('Profile')),
        ],
      ),
    );
  }
}