Flutter界面开发：如何避免Logo被相机位置遮挡？

针对你遇到的AppBar内Logo被相机位置遮挡的情况，给你几个实用的解决方法：

• 方法一：给AppBar添加安全区域内边距
  通过MediaQuery获取设备顶部的安全区域高度，设置给AppBar的toolbarPadding，让整个AppBar内容避开挖孔区域：

  Scaffold(
        appBar: PreferredSize(
            preferredSize: const Size(double.infinity, 100),
            child: AppBar(
              toolbarPadding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
              title: Image.asset(
                Constants.kLogoPath,
                height: 40,
              ),
              centerTitle: true,
              actions: [
                TextButton(onPressed: () {}, child: const Text("Skip"))
              ],
            )));
  

• 方法二：用SafeArea包裹AppBar
  SafeArea会自动识别设备的安全区域，把AppBar内容限制在无遮挡的区域内：

  Scaffold(
        appBar: PreferredSize(
            preferredSize: const Size(double.infinity, 100),
            child: SafeArea(
              child: AppBar(
                title: Image.asset(
                  Constants.kLogoPath,
                  height: 40,
                ),
                centerTitle: true,
                actions: [
                  TextButton(onPressed: () {}, child: const Text("Skip"))
                ],
              ),
            )));
  

• 方法三：单独给Logo添加顶部padding
  如果只需要调整Logo的位置，直接给Image包裹一层Padding，用安全区域高度做内边距：

  Scaffold(
        appBar: PreferredSize(
            preferredSize: const Size(double.infinity, 100),
            child: AppBar(
              title: Padding(
                padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
                child: Image.asset(
                  Constants.kLogoPath,
                  height: 40,
                ),
              ),
              centerTitle: true,
              actions: [
                TextButton(onPressed: () {}, child: const Text("Skip"))
              ],
            )));
  

这些方法里的MediaQuery.of(context).padding.top会自动适配不同设备的挖孔/刘海高度，不用硬写固定数值。

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