带Bottom Navigation Bar时AppBar与Notification Bar重叠问题求助

Hey there! Let's fix that annoying issue where your AppBar gets covered by the Notification Bar when using the CurvedNavigationBar. The root cause here is likely nested Scaffolds and incorrect SafeArea placement—let me break this down for you.

Looking at your code, your BottomNavBarWidget is a Scaffold, and each page in viewContainer (like HomeScreen, ProfilePage) is probably also a full Scaffold with its own AppBar. When you nest Scaffolds, the inner AppBar doesn't properly account for the top safe area (the notification bar) because the outer Scaffold's layout is interfering with it. Plus, wrapping the entire outer Scaffold in SafeArea can throw off the AppBar's automatic padding handling.

Here are two straightforward fixes to get your AppBar back to normal while keeping the Bottom Navigation Bar:

Fix 1: Remove Nested Scaffolds (Recommended) #

Restructure your code so only the BottomNavBarWidget uses a Scaffold, and your individual pages are just the content (no Scaffold or AppBar). Then manage the AppBar from the outer Scaffold, switching it based on the current tab.

Modify your BottomNavBarWidget like this:

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter_ecommerce_app/screens/ShoppingCartPage(p).dart';
import 'package:flutter_ecommerce_app/screens/HomeScreen.dart';
import 'package:flutter_ecommerce_app/screens/profilePage.dart';
import 'package:flutter_ecommerce_app/screens/OurStores.dart';
import 'package:flutter_ecommerce_app/screens/NotificationsScreen.dart';

class BottomNavBarWidget extends StatefulWidget {
  @override
  _BottomNavBarWidgetState createState() => new _BottomNavBarWidgetState();
}

class _BottomNavBarWidgetState extends State<BottomNavBarWidget> {
  int currentIndex = 2;
  GlobalKey _bottomNavigationKey = GlobalKey();

  // Define AppBars for each tab
  final List<AppBar> _appBars = [
    AppBar(title: Text("Our Stores")),
    AppBar(title: Text("Notifications")),
    AppBar(title: Text("Home"), actions: [/* Add your custom actions here */]),
    AppBar(title: Text("Shopping Cart")),
    AppBar(title: Text("Profile")),
  ];

  // Define page bodies (remove Scaffold from each of these!)
  final List<Widget> _pageBodies = [
    StoresNearMe(), // Ensure this is just the page content, no outer Scaffold
    notifications(),
    HomeScreen(),
    CartScreen(),
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Switch AppBar based on current selected tab
      appBar: _appBars[currentIndex],
      // Wrap body in SafeArea to avoid overlap with notification bar and bottom nav
      body: SafeArea(
        child: _pageBodies[currentIndex],
      ),
      bottomNavigationBar: CurvedNavigationBar(
        key: _bottomNavigationKey,
        index: currentIndex,
        height: 45.0,
        items: <Widget>[
          Icon(Icons.menu_open),
          Icon(Icons.notifications_active_rounded),
          Icon(
            Icons.home,
            size: 35,
            color: Colors.redAccent,
          ),
          Icon(Icons.shopping_cart),
          Icon(Icons.person),
        ],
        color: Colors.grey[200],
        buttonBackgroundColor: Colors.grey[400],
        backgroundColor: Colors.white,
        animationCurve: Curves.fastOutSlowIn,
        animationDuration: Duration(milliseconds: 600),
        onTap: (index) {
          setState(() {
            currentIndex = index;
            print(currentIndex);
          });
        },
      ),
    );
  }
}

Then, update each of your page widgets (like HomeScreen) to remove the outer Scaffold. For example, change this:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold( // Remove this line
      appBar: AppBar(...), // Remove this line
      body: Center(child: Text("Home")),
    ); // Remove this line
  }
}

To this:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Home"));
  }
}

Fix 2: Adjust SafeArea Placement (If You Need to Keep Nested Scaffolds) #

If you really need to keep Scaffolds in your individual pages, move the SafeArea to wrap the inner page content instead of the outer Scaffold. This ensures the inner AppBar gets the correct top padding.

Modify your BottomNavBarWidget's build method:

@override
Widget build(BuildContext context) {
  return Scaffold(
    // Remove the outer SafeArea
    body: viewContainer[currentIndex],
    bottomNavigationBar: CurvedNavigationBar(
      // Keep your existing navigation bar code here
    ),
  );
}

Then, in each page (like HomeScreen), wrap the body in SafeArea:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home")),
      body: SafeArea(
        child: Center(child: Text("Home")),
      ),
    );
  }
}

This way, the inner Scaffold's AppBar will automatically handle the top safe area, and the body stays clear of the bottom navigation bar.

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