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

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

概述

Titled Bottom Navigation Bar 是一个带有平滑动画效果的漂亮、简洁且简单的底部导航栏。此插件高度可定制，详情请参阅以下内容。

预览（默认模式）

预览（带反转模式）

包概述

• ✅ 可自定义图标颜色
• ✅ 可自定义指示器颜色
• ✅ 支持 2 到 5 个项
• ✅ 反转模式（显示选中的项为图标或标题）
• ✅ 可定义自定义项背景色
• ✅ 使用 currentIndex 属性更新导航栏（通过传递选项卡位置）
• ✅ 更新当前索引时无需调用 setState
• ✅ 支持 RTL 文本方向（感谢 Victor Uvarov）

入门指南

按照以下步骤使用此库：

添加插件

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

dependencies:
  ...
  titled_navigation_bar: ^4.1.0

导入库

在 Dart 文件中导入库：

import 'package:titled_navigation_bar/titled_navigation_bar.dart';

添加组件

在 Scaffold 中添加 TitledBottomNavigationBar 组件：

bottomNavigationBar: TitledBottomNavigationBar(
  currentIndex: 2, // 用于通过位置更新导航栏
  onTap: (index) {
    print("Selected Index: $index");
  },
  items: [
    TitledNavigationBarItem(title: Text('Home'), icon: Icons.home),
    TitledNavigationBarItem(title: Text('Search'), icon: Icons.search),
    TitledNavigationBarItem(title: Text('Bag'), icon: Icons.card_travel),
    TitledNavigationBarItem(title: Text('Orders'), icon: Icons.shopping_cart),
    TitledNavigationBarItem(title: Text('Profile'), icon: Icons.person_outline),
  ]
)

自定义（可选）

TitledBottomNavigationBar

• onTap - 当项目被点击时通知，您可以在此函数中获取当前项目的索引。不应为空！
• items - 您的底部导航栏的项目。使用 TitledNavigationBarItem 类添加项目。不应为空！
• curve - 用于定义自定义曲线动画。不应为空！
• reverse - 如果为 true，则选中项的可见小部件将是文本（带有项的标题）。如果为 false，则选中项的可见小部件将是图标。默认为 false
• activeColor - 活动文本/图标的颜色。默认颜色是您的应用主题的 indicatorColor。
• inactiveColor - 非活动文本/图标的颜色。默认为黑色。
• indicatorColor - 指示器的颜色。默认颜色是您的应用主题的 indicatorColor。
• currentIndex - 用于通过位置更新导航栏。
• enableShadow - 用于移除导航栏的阴影。

TitledNavigationBarItem

• icon - 此项的图标。这是默认状态，如果反转模式未启用。
• title - 此项的标题。这是默认状态，如果反转模式启用。

完整示例

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Titled Bar',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  State createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<TitledNavigationBarItem> items = [
    TitledNavigationBarItem(title: Text('Home'), icon: Icons.home),
    TitledNavigationBarItem(title: Text('Search'), icon: Icons.search),
    TitledNavigationBarItem(title: Text('Bag'), icon: Icons.card_travel),
    TitledNavigationBarItem(title: Text('Orders'), icon: Icons.shopping_cart),
    TitledNavigationBarItem(title: Text('Profile'), icon: Icons.person_outline),
  ];

  bool navBarMode = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Titled Bottom Bar"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("Reversed mode:"),
            Switch(
              value: navBarMode,
              onChanged: (v) {
                setState(() => navBarMode = v);
              },
            ),
          ],
        ),
      ),
      bottomNavigationBar: TitledBottomNavigationBar(
        onTap: (index) => print("Selected Index: $index"),
        reverse: navBarMode,
        curve: Curves.easeInBack,
        items: items,
        activeColor: Colors.red,
        inactiveColor: Colors.blueGrey,
      ),
    );
  }
}