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

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

特性

  • 动画 当选项卡被选中时，您可以感受到此包带来的动画效果。

  • 可配置的小部件 您可以控制此小部件的任何部分，如背景颜色、图标、大小、动画类型、颜色等。

  • 强健构建 此包经过严格的测试，以确保其值得开发者信赖。

  • 美观的UI 使用此包，您可以创建强大的UI。

安装

在您的项目pubspec.yaml文件中添加以下依赖项：

dependencies:
  super_bottom_navigation_bar: latest_version

然后导入该库：

import 'package:super_bottom_navigation_bar/super_bottom_navigation_bar.dart';

更多详情请参阅 pub.dev。

使用

super_bottom_navigation_bar 包可以简单地使用：

注意：

  • items 的值必须满足 items >= 1。
  • currentIndex 的值必须满足 currentIndex >= 0 && currentIndex < items.length。
简单设计
Scaffold(
  bottomNavigationBar: SuperBottomNavigationBar(
    currentIndex: 1,
    items: [
      SuperBottomNavigationBarItem(),
      SuperBottomNavigationBarItem(),
      SuperBottomNavigationBarItem(),
    ],
    onSelected: (index) {
      print('tab $index');
    },
  ),
  // 其他组件
);

简单设计

普通设计
Color primaryColor = Colors.yellowAccent;

Scaffold(
  bottomNavigationBar: SuperBottomNavigationBar(
    currentIndex: 1,
    items: [
      SuperBottomNavigationBarItem(
        unSelectedIcon: Icons.home_outlined,
        selectedIcon: Icons.home,
        splashColor: primaryColor,
        borderBottomColor: primaryColor,
        backgroundShadowColor: primaryColor,
        selectedIconColor: primaryColor,
        unSelectedIconColor: Colors.grey
      ),
      SuperBottomNavigationBarItem(
        unSelectedIcon: Icons.favorite_border,
        selectedIcon: Icons.favorite,
        splashColor: primaryColor,
        borderBottomColor: primaryColor,
        backgroundShadowColor: primaryColor,
        selectedIconColor: primaryColor,
        unSelectedIconColor: Colors.grey
      ),
      SuperBottomNavigationBarItem(
        unSelectedIcon: Icons.cloud_done_outlined,
        selectedIcon: Icons.cloud_done,
        splashColor: primaryColor,
        borderBottomColor: primaryColor,
        backgroundShadowColor: primaryColor,
        selectedIconColor: primaryColor,
        unSelectedIconColor: Colors.grey
      ),
    ],
    onSelected: (index) {
      print('tab $index');
    },
  ),
  // 其他组件
);

普通设计

强大的设计
Scaffold(
  bottomNavigationBar: SuperBottomNavigationBar(
    currentIndex: 2,
    items: makeNavItems(),
    onSelected: (index) {
      print('tab $index');
    },
  ),
  // 其他组件
);

List<SuperBottomNavigationBarItem> makeNavItems() {
  return [
    SuperBottomNavigationBarItem(
      unSelectedIcon: Icons.home_outlined,
      selectedIcon: Icons.home_outlined,
      size: 30,
      backgroundShadowColor: Colors.red,
      borderBottomColor: Colors.red,
      borderBottomWidth: 3,
      splashColor: Colors.red,
      selectedIconColor: Colors.red,
      unSelectedIconColor: Colors.red
    ),
    SuperBottomNavigationBarItem(
      unSelectedIcon: Icons.search_outlined,
      selectedIcon: Icons.search_outlined,
      size: 30,
      backgroundShadowColor: Colors.blue,
      borderBottomColor: Colors.blue,
      borderBottomWidth: 3,
      splashColor: Colors.blue,
      selectedIconColor: Colors.blue,
      unSelectedIconColor: Colors.blue
    ),
    SuperBottomNavigationBarItem(
      unSelectedIcon: Icons.star_border_outlined,
      selectedIcon: Icons.star_border_outlined,
      size: 30,
      backgroundShadowColor: Colors.yellowAccent,
      borderBottomColor: Colors.yellowAccent,
      borderBottomWidth: 3,
      splashColor: Colors.yellowAccent,
      selectedIconColor: Colors.yellowAccent,
      unSelectedIconColor: Colors.yellowAccent
    ),
    SuperBottomNavigationBarItem(
      unSelectedIcon: Icons.done_outline_rounded,
      selectedIcon: Icons.done_outline_rounded,
      size: 30,
      backgroundShadowColor: Colors.green,
      borderBottomColor: Colors.green,
      borderBottomWidth: 3,
      splashColor: Colors.green,
      selectedIconColor: Colors.green,
      unSelectedIconColor: Colors.green
    ),
    SuperBottomNavigationBarItem(
      unSelectedIcon: Icons.person_outline,
      selectedIcon: Icons.person_outline,
      size: 30,
      backgroundShadowColor: Colors.purpleAccent,
      borderBottomColor: Colors.purpleAccent,
      borderBottomWidth: 3,
      splashColor: Colors.purpleAccent,
      selectedIconColor: Colors.purpleAccent,
      unSelectedIconColor: Colors.purpleAccent
    ),
  ];
}

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

1 回复

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


当然，下面是一个关于如何使用 super_bottom_navigation_bar 插件在 Flutter 中实现底部导航栏的示例代码。这个插件提供了丰富的自定义选项，使你可以轻松地实现漂亮的底部导航栏。

首先，确保你的 Flutter 项目中包含了 super_bottom_navigation_bar 插件。你可以在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  super_bottom_navigation_bar: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来是一个完整的示例代码，展示如何使用 super_bottom_navigation_bar 插件：

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

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

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

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

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

  final List<SbnItem> _items = [
    SbnItem(
      icon: Icons.home,
      title: 'Home',
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
    ),
    SbnItem(
      icon: Icons.search,
      title: 'Search',
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
    ),
    SbnItem(
      icon: Icons.library_books,
      title: 'Library',
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
    ),
    SbnItem(
      icon: Icons.person,
      title: 'Profile',
      activeColor: Colors.blue,
      inactiveColor: Colors.grey,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Page: $_currentIndex'),
      ),
      bottomNavigationBar: SuperBottomNavigationBar(
        currentIndex: _currentIndex,
        onTabSelected: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: _items,
        configuration: SbnConfiguration(
          inactiveLabelStyle: TextStyle(fontSize: 10),
          activeLabelStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
          inactiveBackgroundColor: Colors.white,
          activeBackgroundColor: Colors.blue[100]!,
          inactiveIconSize: 24,
          activeIconSize: 28,
          showElevation: true,
          elevation: 8,
          curve: Curves.easeInOut,
          borderRadius: BorderRadius.circular(16),
          margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖添加：在 pubspec.yaml 中添加 super_bottom_navigation_bar 依赖。
  2. 主应用入口：MyApp 类是应用的入口，它包含了 MaterialApp，并设置了 home 为 MyHomePage。
  3. 状态管理：MyHomePage 是一个有状态的组件，它使用 _currentIndex 来跟踪当前选中的底部导航项。
  4. 底部导航项：_items 是一个 SbnItem 对象的列表，每个对象代表一个底部导航项，包括图标、标题、激活和未激活的颜色等。
  5. 构建 UI：在 build 方法中，Scaffold 包含了 Center 组件，显示当前选中的页面索引。SuperBottomNavigationBar 组件被放置在 bottomNavigationBar 属性中，用于实现底部导航栏。
  6. 配置：SbnConfiguration 类允许你自定义底部导航栏的外观，包括标签样式、背景颜色、图标大小、边距等。

这个示例展示了如何使用 super_bottom_navigation_bar 插件创建一个具有四个导航项的底部导航栏，并根据用户的选择更新页面内容。你可以根据需要进一步自定义和扩展这个示例。

回到顶部