Flutter中能否实现如图所示的第三种TabBarView？

完全可以实现图中的第三种TabBarView（中间凸起样式），下面是基于Flutter的具体实现思路和代码示例：

核心实现思路 #

• 用Stack组件组合底部导航栏与中间凸起的按钮，让凸起按钮悬浮在导航栏上方
• 自定义底部导航项的样式，隐藏中间默认项，替换为独立的悬浮按钮
• 通过PageController控制PageView的页面切换，实现导航与页面联动

代码示例 #

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const TabBarPage(),
      theme: ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class TabBarPage extends StatefulWidget {
  const TabBarPage({super.key});

  @override
  State<TabBarPage> createState() => _TabBarPageState();
}

class _TabBarPageState extends State<TabBarPage> {
  final PageController _pageController = PageController(initialPage: 2);
  int _currentIndex = 2;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        onPageChanged: (index) {
          setState(() => _currentIndex = index);
        },
        children: const [
          Center(child: Text("首页")),
          Center(child: Text("消息")),
          Center(child: Text("发布")),
          Center(child: Text("我的")),
          Center(child: Text("设置")),
        ],
      ),
      bottomNavigationBar: Stack(
        alignment: Alignment.topCenter,
        children: [
          BottomNavigationBar(
            currentIndex: _currentIndex,
            onTap: (index) {
              setState(() => _currentIndex = index);
              _pageController.jumpToPage(index);
            },
            items: const [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
              BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
              BottomNavigationBarItem(icon: SizedBox(), label: ""), // 隐藏中间默认项
              BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
              BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
            ],
          ),
          // 中间凸起的发布按钮
          Positioned(
            top: -25, // 向上偏移实现悬浮效果
            child: GestureDetector(
              onTap: () {
                setState(() => _currentIndex = 2);
                _pageController.jumpToPage(2);
              },
              child: Container(
                width: 60,
                height: 60,
                decoration: const BoxDecoration(
                  color: Colors.blue,
                  shape: BoxShape.circle,
                  boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 5)],
                ),
                child: const Icon(Icons.add, color: Colors.white, size: 30),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

额外说明 #

• 可根据设计需求调整凸起按钮的大小、颜色、阴影样式，适配不同风格
• 若需要点击动画，可将凸起按钮替换为AnimatedContainer，添加缩放或颜色过渡效果
• 也可借助第三方库快速实现，但自定义方式更灵活可控

内容的提问来源于stack exchange，提问作者ming hoe