如何实现随AppBar尺寸变化的SingleChildScrollView顶部可变内边距？

我创建了一个由SafeArea包裹的FrostedAppBar，希望SingleChildScrollView能在其下方滚动，但无法编写可变内边距代码，将AppBar的SafeArea高度添加到SingleChildScrollView的顶部内边距中。当前代码使用固定的top:90内边距，导致内容在不同设备上可能被AppBar遮挡模糊。

当前代码片段 #

home: Scaffold(
          backgroundColor: const Color(0xFFF6FFF1),
          extendBody: true,
          extendBodyBehindAppBar: true,
          // Body
         body: SingleChildScrollView(
                padding:
                    EdgeInsets.only(top: 90, left: 10, right: 10, bottom: 8),
                child: Text(
                  lorem(paragraphs: 4, words: 480),
                ), 
              ),

appBar: FrostedAppBar(
            actions: [
              IconButton(
                icon: Icon(
                  Icons.help_outline_rounded,
                  color: lightColorScheme.tertiary,
                  shadows: const [
                    Shadow(
                        color: Colors.black,
                        blurRadius: 2,
                        offset: Offset(1, 2))
                  ],
                ),
                onPressed: null,
                iconSize: 40,
              )
            ],
            title: Text(
              'Title',
              style: GoogleFonts.racingSansOne(
                  fontSize: 40, color: lightColorScheme.primary),
              textAlign: TextAlign.center,
            ),
            leading: IconButton(
              icon: Icon(
                Icons.menu_rounded,
                color: lightColorScheme.tertiary,
                shadows: const [
                  Shadow(
                      color: Colors.black, blurRadius: 2, offset: Offset(1, 2))
                ],
              ),
              iconSize: 40,
              onPressed: null,
            ),
          ), 

解决方案 #

方案1：动态计算状态栏+AppBar高度（保留透明覆盖） #

通过MediaQuery获取状态栏高度，结合AppBar的高度（默认用kToolbarHeight，自定义高度则替换为实际值），动态设置内边距：

body: LayoutBuilder(
  builder: (context, constraints) {
    final statusBarHeight = MediaQuery.of(context).padding.top;
    // 若FrostedAppBar是自定义高度，替换为实际数值，比如80
    final appBarHeight = kToolbarHeight; 
    return SingleChildScrollView(
      padding: EdgeInsets.only(
        top: statusBarHeight + appBarHeight,
        left: 10,
        right: 10,
        bottom: 8,
      ),
      child: Text(lorem(paragraphs: 4, words: 480)),
    );
  },
),

方案2：移除透明覆盖，用SafeArea自动适配 #

如果不需要AppBar透明覆盖布局的效果，直接移除extendBodyBehindAppBar: true，并在SingleChildScrollView外层套SafeArea，内容会自动避开状态栏和AppBar：

home: Scaffold(
  backgroundColor: const Color(0xFFF6FFF1),
  extendBody: true,
  // 移除extendBodyBehindAppBar配置
  appBar: FrostedAppBar(...), // 保留原AppBar代码
  body: SafeArea(
    child: SingleChildScrollView(
      padding: EdgeInsets.only(left:10, right:10, bottom:8),
      child: Text(lorem(paragraphs:4, words:480)),
    ),
  ),
),

方案3：使用CustomScrollView+SliverAppBar（推荐） #

这是Flutter官方推荐的滚动布局方案，完美适配AppBar与滚动内容的交互，同时可实现模糊效果：

import 'dart:ui'; // 需要导入此包使用ImageFilter

home: Scaffold(
  backgroundColor: const Color(0xFFF6FFF1),
  body: CustomScrollView(
    slivers: [
      SliverAppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        pinned: true, // 固定AppBar不随滚动消失
        title: Text(
          'Title',
          style: GoogleFonts.racingSansOne(
              fontSize: 40, color: lightColorScheme.primary),
          textAlign: TextAlign.center,
        ),
        leading: IconButton(
          icon: Icon(
            Icons.menu_rounded,
            color: lightColorScheme.tertiary,
            shadows: const [
              Shadow(
                  color: Colors.black, blurRadius: 2, offset: Offset(1, 2))
            ],
          ),
          iconSize: 40,
          onPressed: null,
        ),
        actions: [
          IconButton(
            icon: Icon(
              Icons.help_outline_rounded,
              color: lightColorScheme.tertiary,
              shadows: const [
                Shadow(
                    color: Colors.black, blurRadius: 2, offset: Offset(1, 2))
              ],
            ),
            onPressed: null,
            iconSize: 40,
          )
        ],
        // 实现模糊背景效果，替代FrostedAppBar
        flexibleSpace: Container(
          decoration: BoxDecoration(
            color: Colors.white.withOpacity(0.8),
            backdropFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          ),
        ),
      ),
      SliverPadding(
        padding: EdgeInsets.only(left:10, right:10, bottom:8),
        sliver: SliverToBoxAdapter(
          child: Text(lorem(paragraphs:4, words:480)),
        ),
      ),
    ],
  ),
),

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