如何实现Scaffold组件的Body显示于AppBar下方或透明AppBar后方？

Hey there! Let's tackle these two Scaffold layout scenarios you're asking about—both are super common once you know which properties to tweak. Here's how to implement each one:

1. Make Body Content Show Below the AppBar (No Overlap) #

This is actually the default behavior of a standard Scaffold, but if you've messed with settings that caused overlap, or want to confirm the setup, here's the straightforward way:

• Don't use the extendBodyBehindAppBar: true property (this is what makes content creep under the AppBar)
• Stick with the default AppBar setup, or if using a custom AppBar, ensure you define its preferredSize correctly—Scaffold will automatically reserve space for it so your Body starts right below.

Example Code: #

Scaffold(
  appBar: AppBar(
    title: const Text('Standard AppBar'),
    backgroundColor: Colors.blueAccent,
  ),
  // Body automatically starts at the bottom of the AppBar
  body: const Center(
    child: Text('My content lives safely below the AppBar'),
  ),
);

For a custom-height AppBar:

Scaffold(
  appBar: PreferredSize(
    preferredSize: const Size.fromHeight(80), // Custom AppBar height
    child: Container(
      color: Colors.blueAccent,
      child: const Center(
        child: Text('Taller Custom AppBar'),
      ),
    ),
  ),
  body: const Center(
    child: Text('Content still sits below the custom AppBar'),
  ),
);

2. Show Body Content Behind a Transparent AppBar #

To pull this off, you need to tell the Scaffold to let the Body extend under the AppBar, then make the AppBar transparent so the content shows through.

Key Steps: #

1. Set extendBodyBehindAppBar: true on the Scaffold—this lets the Body occupy the full screen, including the AppBar's space.
2. Make the AppBar transparent with backgroundColor: Colors.transparent.
3. Remove the AppBar's shadow with elevation: 0 (otherwise the shadow will block your content).

Example Code: #

Scaffold(
  extendBodyBehindAppBar: true, // Critical for content to go behind
  appBar: AppBar(
    title: const Text('Transparent AppBar'),
    backgroundColor: Colors.transparent,
    elevation: 0, // No shadow blocking content
    foregroundColor: Colors.white, // Make text visible against background content
  ),
  body: Container(
    // Using a background image to clearly show the overlap effect
    decoration: const BoxDecoration(
      image: DecorationImage(
        image: NetworkImage('https://picsum.photos/1080/1920'),
        fit: BoxFit.cover,
      ),
    ),
    child: const Center(
      child: Text(
        'My content is behind the AppBar!',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
);

If you're using a custom transparent AppBar:

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: PreferredSize(
    preferredSize: const Size.fromHeight(80),
    child: Container(
      color: Colors.transparent,
      child: const Center(
        child: Text(
          'Custom Transparent AppBar',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ),
  ),
  body: const Center(
    child: Text(
      'Content behind custom transparent AppBar',
      style: TextStyle(color: Colors.white, fontSize: 24),
    ),
  ),
);

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