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

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

Cap Navigation Bar

一个用于 Flutter 的优秀动画底部导航栏插件，并支持程序化导航。

预览

暗模式导航

暗模式导航

亮模式导航

亮模式导航

开始使用

在你的 pubspec.yaml 文件中添加 cap_navigation_bar 插件：

dependencies:
  cap_navigation_bar: //最新版本

导入该插件：

import 'package:cap_navigation_bar/cap_navigation_bar.dart';

使用方法

在状态类中创建一个整型属性来保存并设置当前页面的索引。然后使用一个项目列表，并使用索引来确定选中项的颜色。

首先创建一个方法来确定项目的颜色：

Color? itemColor(Color focusedIconColor, int index, int currentIndex) {
  // 如果当前索引等于给定的索引，则返回聚焦颜色，否则返回 null
  return index == currentIndex ? focusedIconColor : null;
}

然后在你的类中使用它：

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    final scaffoldColor = Theme.of(context).scaffoldBackgroundColor;
    final icons = <IconData>[
      Icons.person,
      Icons.home,
      Icons.shopping_cart,
      Icons.settings,
    ];
    final items = List.generate(
      icons.length,
      (index) => Icon(
        icons[index],
        color: itemColor(scaffoldColor, index, selectedIndex),
      ),
    );

    final screens = <Widget>[
      const UserScreen(),
      const HomeScreen(),
      const FavoritesAndPurchasesScreen(),
      const SettingsScreen(),
    ];

    return SafeArea(
      child: Scaffold(
        body: screens[selectedIndex],
        bottomNavigationBar: CapNavigationBar(
          items: items,
          index: selectedIndex,
          onTap: (index) => setState(
            () => selectedIndex = index,
          ),
        ),
      ),
    );
  }
}

特性

  • items: 小部件列表
  • index: 导航栏的索引，可用于更改当前索引或设置初始索引
  • color: 导航栏的颜色，默认为白色
  • capColor: 覆盖的颜色，默认为主颜色
  • onTap: 用于处理项目点击的函数
  • animationCurve: 动画的曲线，默认为线性
  • animationDuration: 按钮变化动画的持续时间，默认为 600 毫秒
  • height: 底部导航栏的高度
  • capHeight: 覆盖的高度，默认值与导航栏高度相同
  • capWidth: 覆盖的宽度

在代码中的任意位置导航到页面

你可以在代码的任何位置通过 CapNavigationKeyNotifier 类的 navigateToPage 方法程序化地导航到特定页面索引。

导入该类：

import 'package:cap_navigation_bar/navigation_key_notifier.dart';

然后你可以使用 navigateToPage 方法：

CapNavigationKeyNotifier().navigateToPage(2);

更多关于Flutter自定义导航栏插件cap_navigation_bar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义导航栏插件cap_navigation_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


cap_navigation_bar 是一个 Flutter 插件，用于创建自定义的底部导航栏。它提供了丰富的配置选项，允许开发者轻松地创建具有不同样式和动画效果的导航栏。下面是使用 cap_navigation_bar 的基本步骤和示例。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 cap_navigation_bar 的依赖：

dependencies:
  flutter:
    sdk: flutter
  cap_navigation_bar: ^1.0.0  # 请检查最新版本

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

2. 导入包

在需要使用 cap_navigation_bar 的 Dart 文件中导入包：

import 'package:cap_navigation_bar/cap_navigation_bar.dart';

3. 使用 CapNavigationBar

CapNavigationBar 是一个 StatefulWidget，您可以使用它来创建一个自定义的底部导航栏。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Profile Page')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: CapNavigationBar(
        selectedIndex: _selectedIndex,
        onItemSelected: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          CapNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          CapNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          CapNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
      ),
    );
  }
}

4. 配置选项

CapNavigationBar 提供了多种配置选项，您可以根据需要自定义导航栏的外观和行为。以下是一些常用的配置选项：

  • selectedIndex: 当前选中的索引。
  • onItemSelected: 当用户选择某个项目时的回调函数。
  • items: 导航栏项目的列表，每个项目是一个 CapNavigationBarItem。
  • backgroundColor: 导航栏的背景颜色。
  • elevation: 导航栏的阴影深度。
  • iconSize: 图标的大小。
  • selectedColor: 选中项目的颜色。
  • unselectedColor: 未选中项目的颜色。
  • animationDuration: 动画持续时间。
  • animationCurve: 动画曲线。

5. 自定义 CapNavigationBarItem

每个 CapNavigationBarItem 可以包含一个图标和标题：

CapNavigationBarItem(
  icon: Icon(Icons.home),
  title: Text('Home'),
  // 其他自定义选项
),
回到顶部