titled_navigation_bar：打造优雅的底部导航栏

titled_navigation_bar：打造优雅的底部导航栏

titled_navigation_barA beautiful and simple bottom navigation bar with smooth animation when switching selected item.项目地址:https://gitcode.com/gh_mirrors/ti/titled_navigation_bar

项目介绍

titled_navigation_bar 是一个简洁美观的 Flutter 底部导航栏插件，提供了平滑的点击动画效果。该插件高度可定制，适合希望在应用中实现交互友好且视觉愉悦的导航体验的开发者。它支持从 Flutter SDK 2.12.0 开始的版本，并且已适配到最新的 Flutter 环境。

项目快速启动

要快速将 titled_navigation_bar 集成到你的 Flutter 项目中，首先，在你的 pubspec.yaml 文件的依赖项部分添加以下代码：

dependencies:
  titled_navigation_bar: ^5.0.0-nullsafety.0

然后，运行 flutter pub get 来获取这个包。接下来，在你的代码中导入包并使用：

import 'package:titled_navigation_bar/titled_navigation_bar.dart';

...

// 在合适的位置添加底部导航栏
bottomNavigationBar: TitledBottomNavigationBar(
  currentIndex: 2,
  onTap: (index) {
    print("Selected Index: $index");
  },
  items: [
    TitledNavigationBarItem(
      title: Text('首页'),
      icon: Icons.home,
    ),
    TitledNavigationBarItem(
      title: Text('搜索'),
      icon: Icons.search,
    ),
    // 添加更多项...
  ],
),

这段代码将会展示一个具有指定图标和文字标签的底部导航栏，并在选中项变化时打印索引。

应用案例和最佳实践

自定义样式

为了充分利用 titled_navigation_bar 的自定义能力，可以调整诸如指示器颜色、图标颜色以及是否启用反向模式等属性，以适应不同的设计需求：

TitledBottomNavigationBar(
  items: _getItems(),
  currentIndex: _currentIndex,
  onTap: _onTabTap,
  indicatorColor: Colors.blueAccent, // 自定义指示器颜色
  activeIconColor: Colors.white, // 活动状态下的图标颜色
  inactiveIconColor: Colors.grey, // 非活动状态下的图标颜色
  reverse: true, // 启用反向模式（图标或标题作为选中显示）
)

动态更新

利用 currentIndex 属性动态控制当前选中的标签页，而无需显式调用 setState：

void _onTabTap(int index) {
  setState(() {
    _currentIndex = index;
  });
}

典型生态项目

虽然 titled_navigation_bar 本身是一个独立的组件，但在实际开发中，它可以与其他 Flutter 生态中的UI库和框架结合使用，比如与 provider 结合管理状态，或者在利用 bloc 进行复杂流处理的应用里，作为界面切换的核心组件。这些结合使得开发者能够构建既美观又功能丰富的移动应用程序。

---

通过以上步骤和实践建议，开发者可以轻松地将 titled_navigation_bar 引入自己的 Flutter 项目中，创建出既符合现代设计标准，又具备流畅用户体验的底部导航界面。

titled_navigation_barA beautiful and simple bottom navigation bar with smooth animation when switching selected item.项目地址:https://gitcode.com/gh_mirrors/ti/titled_navigation_bar