Flutter如何实现convex_bottom_navigation效果

在Flutter中如何实现类似convex_bottom_navigation的效果？我需要在底部导航栏添加凸起的按钮效果，类似一些主流App的底部导航样式。目前尝试了默认的BottomNavigationBar但无法实现这种特殊形状，请问有没有现成的插件或者自定义实现方案？最好能提供具体的代码示例或实现思路。

2 回复

使用convex_bottom_bar包实现。在pubspec.yaml添加依赖，然后在代码中导入包，使用ConvexAppBar组件即可快速创建凸起底部导航栏。

更多关于Flutter如何实现convex_bottom_navigation效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现凸起式底部导航栏效果，可以使用 convex_bottom_navigation 第三方库，这是最便捷的方法。

实现步骤：

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

    dependencies:
  convex_bottom_navigation: ^3.1.0

  2. 基本使用示例

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

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

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  final List<Widget> _pages = [
    Page1(),
    Page2(),
    Page3(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: ConvexAppBar(
        items: [
          TabItem(icon: Icons.home, title: '首页'),
          TabItem(icon: Icons.map, title: '发现'),
          TabItem(icon: Icons.add, title: '发布'), // 中间凸起项
          TabItem(icon: Icons.message, title: '消息'),
          TabItem(icon: Icons.people, title: '我的'),
        ],
        initialActiveIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

关键特性说明：

  • 自动实现凸起效果，默认中间项凸起
  • 支持自定义样式：颜色、高度、弧度等
  • 提供多种样式风格（style 参数）：
    • ConvexAppBarStyle.fixed
    • ConvexAppBarStyle.react
    • ConvexAppBarStyle.fixedCircle
    • ConvexAppBarStyle.flip
    • ConvexAppBarStyle.titled

自定义样式示例：

ConvexAppBar(
  style: ConvexAppBarStyle.flip,
  backgroundColor: Colors.blue,
  items: [
    TabItem(icon: Icons.home, title: 'Home'),
    TabItem(icon: Icons.favorite, title: 'Favorite'),
  ],
  onTap: (int i) => print('click index=$i'),
);

通过这个包可以快速实现专业的凸起底部导航效果，无需手动绘制复杂图形。

回到顶部