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

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

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

Flutter官方提供的BottomAppBar只能显示带有一个凹槽FAB（浮动操作按钮）的应用栏，有时候我们可能需要一个凸起的FAB。ConvexAppBar就是受到BottomAppBar和NotchShape实现的启发而创建的。

如何使用

通常，ConvexAppBar可以通过设置Scaffold的bottomNavigationBar属性来工作。

1. 添加依赖

在你的项目的pubspec.yaml文件中添加以下内容，使用最新版本：

dependencies:
  convex_bottom_bar: ^latest_version

确保替换latest_version为实际的最新版本号，可以在pub.dev上找到。

2. 示例代码

下面是一个简单的示例，展示了如何使用ConvexAppBar：

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

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

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

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

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 1;

  final List<Widget> _children = [
    Center(child: Text('Home Page')),
    Center(child: Text('Discovery Page')),
    Center(child: Text('Add Page')),
    Center(child: Text('Message Page')),
    Center(child: Text('Profile Page')),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Convex Bottom Bar Example')),
      body: _children[_currentIndex],
      bottomNavigationBar: ConvexAppBar(
        style: TabStyle.react,
        items: [
          TabItem(icon: Icons.home, title: 'Home'),
          TabItem(icon: Icons.map, title: 'Discovery'),
          TabItem(icon: Icons.add, title: 'Add'),
          TabItem(icon: Icons.message, title: 'Message'),
          TabItem(icon: Icons.people, title: 'Profile'),
        ],
        initialActiveIndex: _currentIndex,
        onTap: onTabTapped,
      ),
    );
  }
}

3. 主要功能

  • 提供多种内部样式：如fixed、react等。
  • 更改AppBar主题：通过设置不同的属性来自定义外观。
  • 自定义新样式：使用builder API。
  • 添加徽章：在标签菜单上添加徽章。
  • 优雅的过渡动画：提升用户体验。
  • 钩子API：覆盖一些内部样式。
  • RTL支持：支持从右到左的语言布局。

4. 自定义例子

如果默认样式不符合需求，可以尝试使用ConvexAppBar.builder()来定制几乎所有的标签特性。完整的自定义示例可以在GitHub仓库中找到。

5. 常见问题解答

更多关于如何阻止标签事件、解决崩溃问题、程序化改变活动标签索引等内容，请参阅常见问题解答。

希望这个插件能帮助你更方便地创建美观且功能丰富的底部导航栏！如果你喜欢这个包，别忘了给开发者买杯咖啡以示支持哦！

ko-fi

以上是关于convex_bottom_bar插件的详细介绍和使用方法，希望对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用convex_bottom_bar插件来实现底部导航栏的示例代码。convex_bottom_bar插件提供了丰富的自定义选项，使得底部导航栏不仅美观而且功能强大。

首先，确保你已经在pubspec.yaml文件中添加了convex_bottom_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  convex_bottom_bar: ^3.0.0  # 请检查最新版本号

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

接下来是示例代码，展示如何在Flutter应用中使用convex_bottom_bar：

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

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

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

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

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<String> _pages = ['Home', 'Search', 'Profile', 'Settings'];
  final List<IconData> _icons = [
    Icons.home,
    Icons.search,
    Icons.person,
    Icons.settings,
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(_pages[_selectedIndex]),
      ),
      bottomNavigationBar: ConvexAppBar(
        items: [
          TabItem(icon: Icons.home, title: 'Home'),
          TabItem(icon: Icons.search, title: 'Search'),
          TabItem(icon: Icons.person, title: 'Profile'),
          TabItem(icon: Icons.settings, title: 'Settings'),
        ],
        activeColor: Colors.blue,
        backgroundColor: Colors.white,
        onTap: _onItemTapped,
        initialActiveIndex: _selectedIndex,
        height: 60,
        curve: Curves.easeInOut,
        borderRadius: BorderRadius.circular(20),
      ),
    );
  }
}

解释

  1. 依赖引入：在pubspec.yaml文件中添加convex_bottom_bar依赖。
  2. 主应用入口：MyApp类作为应用的入口，使用MaterialApp包裹HomeScreen。
  3. 状态管理：HomeScreen是一个有状态的小部件，用于管理底部导航栏的当前选中项。
  4. 底部导航栏：ConvexAppBar用于创建底部导航栏。
    • items：包含导航项的列表，每个导航项包括一个图标和一个标题。
    • activeColor：选中项的颜色。
    • backgroundColor：底部导航栏的背景颜色。
    • onTap：点击事件回调，用于更新当前选中项。
    • initialActiveIndex：初始选中项的索引。
    • height：底部导航栏的高度。
    • curve：动画曲线。
    • borderRadius：底部导航栏的圆角半径。

通过这种方式，你可以轻松地在Flutter应用中使用convex_bottom_bar插件来实现一个美观且功能强大的底部导航栏。

回到顶部