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

发布于 1周前 作者 wuwangju 来自 Flutter

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

CubertoBottomBar 是一个Flutter widget,用于创建美观且功能丰富的底部导航栏。它支持两种样式:默认样式(Default Style)和渐变样式(Faded Style)。下面将详细介绍如何使用这个插件,并提供一个完整的示例demo。

一、Getting Started

1. 添加依赖

首先,在项目的 pubspec.yaml 文件中添加 cuberto_bottom_bar 的依赖:

dependencies:
  cuberto_bottom_bar: latest

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

2. 导入包

在 Dart 文件中导入 cuberto_bottom_bar 包:

import 'package:cuberto_bottom_bar/cuberto_bottom_bar.dart';

二、Basic Usage

接下来是基本用法。我们将创建一个包含四个标签页的应用程序,每个标签页都有不同的图标和标题。这里我们使用了 TabData 类来定义每个标签页的数据。

1. 定义TabData列表

List<TabData> tabs = [
  TabData(
    key: const Key('Home'),
    iconData: Icons.home,
    title: 'Home',
    tabColor: Colors.blue,
  ),
  TabData(
    key: const Key('Search'),
    iconData: Icons.search,
    title: 'Search',
    tabColor: Colors.red,
  ),
  TabData(
    key: const Key('Notification'),
    iconData: Icons.notifications,
    title: 'Notification',
    tabColor: Colors.orange,
  ),
  TabData(
    key: const Key('Profile'),
    iconData: Icons.person,
    title: 'Profile',
    tabColor: Colors.green,
  ),
];

2. 创建带有CubertoBottomBar的页面

接下来,我们创建一个 StatefulWidget,并在其中使用 CubertoBottomBar。我们还需要跟踪当前选中的页面索引 _currentPage 和对应的标题 _currentTitle

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentPage = 0;
  String _currentTitle = 'Home';
  Color _currentColor = Colors.blue;

  final List<Color> _inactiveColor = [Colors.grey, Colors.grey, Colors.grey, Colors.grey];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_currentTitle),
        backgroundColor: _currentColor,
      ),
      body: Center(
        child: Text('Current Page: $_currentPage'),
      ),
      bottomNavigationBar: CubertoBottomBar(
        key: const Key("BottomBar"),
        inactiveIconColor: _inactiveColor[_currentPage],
        tabStyle: CubertoTabStyle.styleNormal,
        selectedTab: _currentPage,
        tabs: tabs,
        onTabChangedListener: (position, title, color) {
          setState(() {
            _currentPage = position;
            _currentTitle = title ?? '';
            if (color != null) {
              _currentColor = color;
            }
          });
        },
      ),
    );
  }
}

3. 运行应用

最后一步就是运行你的应用。你应该能看到一个具有四个标签页的底部导航栏,点击不同的标签时,应用栏的颜色和标题都会随之变化。

三、Attributes

CubertoBottomBar 提供了许多可配置的属性,包括但不限于:

  • tabs:标签页数据列表。
  • onTabChangedListener:当选择某个标签时触发的回调函数。
  • selectedTab:当前选中的标签索引,默认为0。
  • inactiveIconColor:未激活状态下的图标颜色,默认从主题获取。
  • textColor:文本颜色,默认为白色。
  • barBackgroundColor:底部栏背景色,默认从主题获取。
  • barBorderRadius:底部栏圆角,默认为null。
  • tabStyle:标签样式,默认为 styleNormal
  • drawer:抽屉位置,默认为无抽屉。

四、Theming

你可以通过设置上述提到的颜色和其他视觉元素来自定义 CubertoBottomBar 的外观。例如,如果你想要更改所有未激活图标的颜色,可以通过修改 inactiveIconColor 属性实现。

五、注意事项

根据官方文档,该组件目前只支持2到4个标签页之间的配置。此外,对于 styleFadedBackground 样式,tabColor 会作为文本颜色使用;如果未设置,则使用 inactiveColor

以上就是关于 cuberto_bottom_bar 插件的基本介绍及使用方法。希望对你有所帮助!如果有任何问题或需要进一步的帮助,请随时提问。


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

1 回复

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


当然,下面是一个关于如何使用 cuberto_bottom_bar 插件在 Flutter 中实现底部导航栏的代码示例。这个插件提供了高度可定制的底部导航栏,非常适合用于需要美观和功能性兼具的应用。

首先,确保你已经在 pubspec.yaml 文件中添加了 cuberto_bottom_bar 依赖:

dependencies:
  flutter:
    sdk: flutter
  cuberto_bottom_bar: ^2.0.0  # 请检查最新版本号

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

接下来,在你的 Flutter 应用中使用 CubertoBottomBar。以下是一个完整的示例,展示了如何设置底部导航栏以及处理导航事件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CubertoBottomBar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<CubertoBottomBarItem> _bottomBarItems = [
    CubertoBottomBarItem(
      icon: Icons.home,
      title: 'Home',
    ),
    CubertoBottomBarItem(
      icon: Icons.search,
      title: 'Search',
    ),
    CubertoBottomBarItem(
      icon: Icons.add,
      title: 'Add',
    ),
    CubertoBottomBarItem(
      icon: Icons.account_circle,
      title: 'Profile',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: CubertoBottomBar(
        items: _bottomBarItems,
        currentIndex: _selectedIndex,
        onTap: (int index) {
          setState(() {
            _selectedIndex = index;
            // 你可以在这里添加导航逻辑,例如使用 Navigator.push
          });
        },
        config: CubertoBottomBarConfig(
          inactiveColor: Colors.grey,
          activeColor: Colors.blue,
          inactiveIconSize: 22,
          activeIconSize: 24,
          height: 60,
        ),
      ),
      body: Center(
        child: _getPageForIndex(_selectedIndex),
      ),
    );
  }

  Widget _getPageForIndex(int index) {
    switch (index) {
      case 0:
        return HomePage();
      case 1:
        return SearchPage();
      case 2:
        return AddPage();
      case 3:
        return ProfilePage();
      default:
        return Container();
    }
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Page'));
  }
}

class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Search Page'));
  }
}

class AddPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Add Page'));
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Profile Page'));
  }
}

在这个示例中,我们:

  1. 定义了 _bottomBarItems 列表,包含每个底部导航项的图标和标题。
  2. 使用 CubertoBottomBar 小部件创建底部导航栏,并设置当前选中的索引和点击事件处理函数。
  3. 根据当前选中的索引动态显示不同的页面(HomePageSearchPageAddPageProfilePage)。

你可以根据需要进一步自定义 CubertoBottomBarConfig 中的配置参数,以满足你的设计需求。

回到顶部