Flutter设置body颜色时ConvexAppBar凸形导航曲线被遮挡问题

• 在Flutter项目中使用convex_bottom_bar作为底部导航栏组件。
• 使用TabStyle.react样式时，若为body中的Container组件设置颜色，会遮挡底部导航栏激活选项卡的凸形“曲线”部分；不设置颜色时，凸形曲线可正常显示。

main.dart #

import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';
import 'custom.dart';
import 'game_start.dart';
import 'news.dart';
import 'settings.dart';
import 'share.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MainPage(title: 'Flutter Convex BottomBar Sample'),
    );
  }
}

class MainPage extends StatefulWidget {
  MainPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int selectedIndex = 2;
  List<Widget> listWidgets = [
    News(),
    Custom(),
    GameStart(),
    Share(),
    Settings()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: listWidgets[selectedIndex],
      ),
      bottomNavigationBar: ConvexAppBar(
        style: TabStyle.react,
        items: [
          TabItem(icon: Icons.star, title: 'News'),
          TabItem(icon: Icons.fact_check, title: 'Custom'),
          TabItem(icon: Icons.play_arrow, title: 'Play'),
          TabItem(icon: Icons.share, title: 'Share'),
          TabItem(icon: Icons.settings, title: 'Settings'),
        ],
        onTap: onItemTapped,
        color: Color(0xFFffc400),
        activeColor: Color(0xFFffc400),
        backgroundColor: Colors.black87,
        height: 50,
        initialActiveIndex: 2,
      ),
    );
  }

  void onItemTapped(int index) {
    setState(() {
      selectedIndex = index;
    });
  }
}

game_start.dart #

import 'package:flutter/material.dart';

class GameStart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xFF000000),
      child: Center(
        child: Text(
          "Start Game",
          style: TextStyle(
              fontWeight: FontWeight.bold, fontSize: 22, color: Colors.green),
        ),
      ),
    );
  }
}

news.dart #

import 'package:flutter/material.dart';

class News extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color(0xFF000000),
      child: Center(
        child: Text(
          "News",
          style: TextStyle(
              fontWeight: FontWeight.bold, fontSize: 22, color: Colors.green),
        ),
      ),
    );
  }
}

TabStyle.react样式下，底部导航栏激活项的凸形曲线会超出导航栏自身设置的height范围，延伸到Scaffold的body区域内。如果body内的根Container设置了不透明背景色，会直接覆盖这部分延伸出来的曲线，导致凸形显示不全。

推荐使用第一种方案，改动最小且不影响原有交互：

• 方案一：统一在Scaffold上设置页面背景色，移除所有子页面（GameStart、News等）根Container的color属性。此时body区域默认透明，不会遮挡导航栏凸起部分，Scaffold的背景色会正常透出，和原有显示效果完全一致。
  修改后的Scaffold代码示例：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF000000), // 统一在此设置页面背景
      body: Container(
        child: listWidgets[selectedIndex],
      ),
      // 底部导航栏配置保持不变
      bottomNavigationBar: ConvexAppBar(
        // 原有配置项无需修改
      ),
    );
  }
  

• 方案二：如果需要保留子页面各自的背景色，可给body内容包裹SafeArea，同时设置ConvexAppBar的elevation: 0消除阴影，额外给底部预留12dp左右的padding，避开导航栏凸起的覆盖区域即可。

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