Flutter如何实现底部导航栏凸起按钮

在Flutter中想要实现底部导航栏中间凸起的按钮效果，类似很多App的底部导航栏中间有一个圆形凸起的按钮。请问应该如何实现？需要用到哪些组件或属性？有没有比较简洁的实现方式或者现成的库可以推荐？最好能提供具体的代码示例或实现思路。

2 回复

在Flutter中实现底部导航栏凸起按钮，可使用FloatingActionButton结合BottomAppBar。将FloatingActionButton置于BottomAppBar的中央，并通过shape属性设置凹槽形状，使按钮嵌入导航栏中。

更多关于Flutter如何实现底部导航栏凸起按钮的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现底部导航栏凸起按钮，可以使用FloatingActionButton结合BottomAppBar来实现。以下是具体实现方法：

核心代码示例

import 'package:flutter/material.dart';

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

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('当前页面: $_currentIndex'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _currentIndex = 2; // 切换到凸起按钮对应的页面
          });
        },
        child: Icon(Icons.add),
        backgroundColor: Colors.blue,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(), // 凹槽形状
        notchMargin: 8.0, // 凹槽边距
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              icon: Icon(Icons.home),
              onPressed: () => setState(() => _currentIndex = 0),
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () => setState(() => _currentIndex = 1),
            ),
            SizedBox(width: 48), // 为凸起按钮预留空间
            IconButton(
              icon: Icon(Icons.person),
              onPressed: () => setState(() => _currentIndex = 3),
            ),
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () => setState(() => _currentIndex = 4),
            ),
          ],
        ),
      ),
    );
  }
}

关键要点

  1. 使用BottomAppBar：

    • 设置shape: CircularNotchedRectangle()创建凹槽
    • 通过notchMargin调整凹槽位置

  2. FloatingActionButton定位：

    • 使用floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked
    • 按钮会自动嵌入BottomAppBar的凹槽中

  3. 布局调整：

    • 在BottomAppBar的Row中预留空间（SizedBox）
    • 确保凸起按钮两侧有对称的导航项

  4. 状态管理：

    • 使用setState更新当前选中页面
    • 通过_currentIndex控制页面切换

自定义建议

  • 修改FloatingActionButton的样式（颜色、形状等）
  • 调整notchMargin来改变凹槽大小
  • 使用自定义形状替代CircularNotchedRectangle
  • 可以为凸起按钮添加动画效果

这种方法可以创建出符合Material Design规范的凸起导航按钮，视觉效果和交互体验都很好。

回到顶部