Flutter开启沉浸式模式后AppBar调整异常问题求助

开启沉浸式模式后，AppBar始终保持较大尺寸；设置toolbarHeight为10缩小它时，图片形式的标题出现被裁剪的情况，无法随AppBar上移。

相关截图说明 #

• 开启沉浸式模式的设置截图：
  

上图为开启沉浸式模式的操作方式。

• 未修改的AppBar显示效果：
  

这是未做任何修改时AppBar的显示状态。

• 设置toolbarHeight为10后的AppBar效果：
  

这是设置toolbarHeight为10后的AppBar显示状态。

相关代码 #

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(
      backgroundColor: const Color(0xFF892D89),
      toolbarHeight: 10,
      centerTitle: true,
      title: Container(
        height: 30,
        child: Image.asset('assets/fontlogo.png'),
      ),
    ),
  );
}

已尝试的无效方法 #

• 设置Scaffold的resizeToAvoidBottomInset为true：

Scaffold(
  resizeToAvoidBottomInset: true,
),

• 设置AppBar的titleSpacing属性：

AppBar(
  titleSpacing: 50,
  title: Text('SignShine'),
),

解决方案 #

1. 匹配AppBar高度与标题容器尺寸
   你设置的toolbarHeight为10，但标题容器高度是30，尺寸不匹配必然导致裁剪。先将toolbarHeight调整为与标题容器一致或略大的值，同时适配沉浸式状态栏：

appBar: AppBar(
  backgroundColor: const Color(0xFF892D89),
  toolbarHeight: 30, // 与标题容器高度匹配
  centerTitle: true,
  title: Container(
    height: 30,
    child: Image.asset('assets/fontlogo.png'),
  ),
  elevation: 0, // 隐藏阴影，贴合沉浸式效果
  automaticallyImplyLeading: false, // 无需返回按钮时可关闭
),

2. 自定义顶部栏替代AppBar
   如果需要极小的顶部区域，直接用Container自定义顶部栏，通过位移控制标题位置，避免裁剪：

@override
Widget build(BuildContext context) => Scaffold(
  body: Column(
    children: [
      Container(
        height: 10,
        color: const Color(0xFF892D89),
        child: Center(
          child: Transform.translate(
            offset: const Offset(0, -10), // 根据需求调整偏移量，让图片完整显示
            child: Image.asset('assets/fontlogo.png', height: 30),
          ),
        ),
      ),
      Expanded(child: // 页面内容区域),
    ],
  ),
);

3. 修正沉浸式模式配置
   确保状态栏配置正确，避免与AppBar产生间距冲突。在页面初始化时设置：

@override
void initState() {
  super.initState();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // 状态栏设为透明
    statusBarIconBrightness: Brightness.light, // 根据主题设置图标亮度
  ));
}

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