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

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

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

1. 插件简介

Ultimate Bottom Navigation Bar 是一个为Flutter应用程序提供的高度可定制的底部导航栏。它允许你轻松创建带有图标和标题的导航栏,并自定义其外观和行为。

2. 插件功能展示

以下是该插件支持的不同样式的效果图:

  • Under Curve(下曲线): Under Curve

  • Upper Curve(上曲线): Upper Curve

  • No Curve(无曲线): No Curve

  • Static Curve(静态曲线): Static Upper Curve Static Under Curve

  • Dynamic Curve(动态曲线): Dynamic Upper Curve Dynamic Under Curve

  • 其他自定义效果: Customizaions

3. 使用方法

3.1 添加依赖

在你的 pubspec.yaml 文件中添加以下依赖,使用最新版本:

dependencies:
  ultimate_bottom_navbar: ^latest_version
3.2 示例代码

以下是一个完整的示例代码,展示了如何使用 ultimate_bottom_navbar 插件创建一个底部导航栏:

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

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

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

class BottomNavigationPage extends StatefulWidget {
  @override
  _BottomNavigationPageState createState() => _BottomNavigationPageState();
}

class _BottomNavigationPageState extends State<BottomNavigationPage> {
  int currentIndex = 2;

  final List<String> title = [
    "Favourite",
    "Wallet",
    "Home",
    "Freeze",
    "Alarm"
  ];

  final List<IconData> icons = [
    Icons.favorite, 
    Icons.wallet_giftcard_sharp, 
    Icons.home, 
    Icons.ac_unit_outlined, 
    Icons.access_alarm_rounded, 
  ];

  final List pages = [
    Page1(),
    Page2(),
    Page3(),
    Page4(),
    Page5(),
  ];

  void onItemTapped(int index) async {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[currentIndex],
      bottomNavigationBar: UltimateBottomNavBar(
        icons: icons,
        titles: title,
        currentIndex: currentIndex,
        onTap: (index) async => onItemTapped(index),
        backgroundColor: Colors.black.withOpacity(0.5), // 设置背景颜色
        foregroundColor: Colors.pink, // 设置前景颜色
        selectedIconColor: Colors.black, // 选中项的图标颜色
        unselectedIconColor: Colors.white, // 未选中项的图标颜色
        selectedTextColor: Colors.white, // 选中项的文字颜色
        unselectedTextColor: Colors.grey, // 未选中项的文字颜色
        underCurve: true, // 是否使用下曲线
        staticCurve: false, // 是否使用静态曲线
        showCircleStaticMidItem: true, // 是否显示静态曲线中间项的圆形装饰
        badgeData: [{'index': 1, 'value': '5'}, {'index': 4, 'value': '55'}], // 徽章数据
        badgeColor: Colors.red, // 徽章背景颜色
        badgeTextStyle: TextStyle(color: Colors.white, fontSize: 8.0), // 徽章文字样式
        animationType: Curves.bounceOut, // 动画类型
        animationDuration: Duration(seconds: 1), // 动画持续时间
      ),
    );
  }
}

// 示例页面
class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Page 1"));
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Page 2"));
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Page 3"));
  }
}

class Page4 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Page 4"));
  }
}

class Page5 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Page 5"));
  }
}

4. 自定义属性

UltimateBottomNavBar 提供了丰富的自定义属性,以下是一些常用的属性及其说明:

属性 描述
icons 必填,图标列表
titles 必填,标题列表,使用空字符串表示无标题
currentIndex 必填,当前选中的索引
backgroundColor 背景颜色
foregroundColor 前景颜色
selectedIconColor 选中项的图标颜色
unselectedIconColor 未选中项的图标颜色
selectedTextColor 选中项的文字颜色
unselectedTextColor 未选中项的文字颜色
underCurve 是否使用下曲线
staticCurve 是否使用静态曲线
showCircleStaticMidItem 是否显示静态曲线中间项的圆形装饰
badgeData 徽章数据,格式为 [{'index': 索引, 'value': 徽章值}]
badgeColor 徽章背景颜色
badgeTextStyle 徽章文字样式
animationType 动画类型
animationDuration 动画持续时间

5. RTL支持

UltimateBottomNavBar 支持从右到左(RTL)和从左到右(LTR)的文本方向,可以通过 Directionality 组件进行配置:

Directionality(
  textDirection: TextDirection.rtl,
  child: Scaffold(bottomNavigationBar: UltimateBottomNavBar()),
)

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

1 回复

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


当然,以下是如何在Flutter中使用ultimate_bottom_navbar插件来实现底部导航栏的示例代码。ultimate_bottom_navbar 是一个功能强大的Flutter插件,用于创建高度可定制的底部导航栏。

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

dependencies:
  flutter:
    sdk: flutter
  ultimate_bottom_navbar: ^4.6.0  # 请检查最新版本号

然后,运行以下命令来安装依赖:

flutter pub get

接下来,是一个完整的示例代码,展示如何使用ultimate_bottom_navbar来创建一个带有底部导航栏的应用:

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

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

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

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

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  late int _selectedIndex;
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _selectedIndex = 0;
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  List<Widget> _buildScreenPages() {
    return [
      Center(child: Text('Home')),
      Center(child: Text('Search')),
      Center(child: Text('Profile')),
    ];
  }

  List<UBNBItem> _buildNavBarItems() {
    return [
      UBNBItem(
        icon: Icons.home,
        title: "Home",
      ),
      UBNBItem(
        icon: Icons.search,
        title: "Search",
      ),
      UBNBItem(
        icon: Icons.person,
        title: "Profile",
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: UltimateBottomNavBar(
        currentTabIndex: _selectedIndex,
        onTabSelectedListener: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: _buildNavBarItems(),
      ),
      body: _buildScreenPages()[_selectedIndex],
    );
  }
}

解释

  1. 依赖导入:确保在pubspec.yaml中添加了ultimate_bottom_navbar依赖。

  2. 主应用入口MyApp类是一个简单的MaterialApp,设置了主题和初始页面为HomeScreen

  3. HomeScreen

    • 使用StatefulWidget来管理导航栏的状态。
    • 初始化一个_selectedIndex来跟踪当前选中的选项卡。
    • 初始化一个TabController,尽管在这个例子中我们并没有直接使用它(因为ultimate_bottom_navbar自己处理导航)。
    • _buildScreenPages方法返回一个包含不同屏幕的列表。
    • _buildNavBarItems方法返回一个包含导航栏项的列表。
  4. UltimateBottomNavBar

    • currentTabIndex:当前选中的选项卡索引。
    • onTabSelectedListener:当选项卡被选中时的回调。
    • items:导航栏项的列表。
  5. Scaffold

    • bottomNavigationBar:使用UltimateBottomNavBar来显示底部导航栏。
    • body:根据_selectedIndex显示不同的页面。

这个示例展示了如何设置和使用ultimate_bottom_navbar插件来创建一个带有底部导航栏的Flutter应用。你可以根据需要进一步自定义和扩展此示例。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!