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

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

CoolBottomNavigation

Cool Gif

Getting Started

在pubspec.yaml文件中添加插件依赖：

dependencies:
  ...
  cool_bottom_navigation: ^0.1.2

Limitations

目前该插件限制为2到4个标签页。

Basic Usage

在底部导航栏中添加CoolBottomNavigation小部件：

bottomNavigationBar: CoolBottomNavigation(
    tabs: [
        TabData(iconData: Icons.home, title: "Home"), // 定义第一个标签页，图标为home，标题为Home
        TabData(iconData: Icons.search, title: "Search"), // 定义第二个标签页，图标为search，标题为Search
        TabData(iconData: Icons.shopping_cart, title: "Basket") // 定义第三个标签页，图标为shopping_cart，标题为Basket
    ],
    onTabChangedListener: (position) { // 监听标签页切换事件
        setState(() {
            currentPage = position; // 更新当前选中的页面
        });
    },
)

TabData

TabData 是一个包含标签页信息的对象，其属性如下：

  • iconData -> 用于标签页的图标。
  • title -> 用于标签页的标题。
  • onClick -> 当点击活动标签页的圆圈时可选的回调函数。

Attributes

Required

  • tabs -> TabData 对象的列表。
  • onTabChangedListener -> 处理标签页点击事件的回调函数，接收 int position。

Optional

  • initialSelection -> 默认选择的标签页，默认值为0。
  • circleColor -> 圆圈的颜色，默认从主题中获取。
  • activeIconColor -> 激活状态下的图标颜色，默认从主题中获取。
  • inactiveIconColor -> 非激活状态下的图标颜色，默认从主题中获取。
  • textColor -> 文本颜色，默认从主题中获取。
  • barBackgroundColor -> 导航栏背景颜色，默认从主题中获取。
  • key -> 小部件的键，默认为null。

Theming

CoolBottomNavigation 会尝试使用当前的主题。如果需要自定义主题，可以设置以下属性：

Cool Theming

Programmatic Selection

要通过编程方式选择标签页，需要为小部件分配一个GlobalKey。当需要更改标签页时，可以通过此键访问状态，并调用 setPage(position) 方法。

例如：

final _coolBottomNavigationKey = GlobalKey<CoolBottomNavigationState>();

CoolBottomNavigation(
    key: _coolBottomNavigationKey,
    ...
);

// 在某个地方调用
_coolBottomNavigationKey.currentState?.setPage(2); // 切换到第3个标签页

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

1 回复

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


cool_bottom_navigation 是一个用于 Flutter 的底部导航栏插件，它提供了丰富的自定义选项和动画效果，可以帮助开发者快速实现美观且功能丰富的底部导航栏。以下是如何使用 cool_bottom_navigation 插件的步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 cool_bottom_navigation 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  cool_bottom_navigation: ^0.0.3  # 请使用最新版本

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

2. 导入插件

在你的 Dart 文件中导入 cool_bottom_navigation 插件：

import 'package:cool_bottom_navigation/cool_bottom_navigation.dart';

3. 创建底部导航栏

使用 CoolBottomNavigation 组件来创建底部导航栏。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cool Bottom Navigation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

  final List<Widget> _pages = [
    Page1(),
    Page2(),
    Page3(),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: CoolBottomNavigation(
        items: [
          CoolBottomNavigationItem(
            icon: Icons.home,
            title: 'Home',
          ),
          CoolBottomNavigationItem(
            icon: Icons.search,
            title: 'Search',
          ),
          CoolBottomNavigationItem(
            icon: Icons.person,
            title: 'Profile',
          ),
        ],
        onItemSelected: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        currentIndex: _currentIndex,
        backgroundColor: Colors.white,
        selectedColor: Colors.blue,
        unselectedColor: Colors.grey,
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('Home Page'),
    );
  }
}

class Page2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('Search Page'),
    );
  }
}

class Page3 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text('Profile Page'),
    );
  }
}
回到顶部