Pixel设备模拟器顶部灰化区域的Flutter开发适配咨询

关于顶部灰化区域的本质 #

• 这个区域是安卓设备的状态栏，实体机同样存在，并非模拟器独有。iOS设备也有状态栏，只是默认视觉风格和App融合度更高，所以你之前没明显感知。
• 必须避免在该区域显示核心内容：状态栏会展示系统状态（信号、电量、时间等），内容被遮挡会影响用户体验，且不同设备状态栏高度存在差异。

Flutter适配方案（无需针对Pixel单独编写代码） #

不要用固定的margin: EdgeInsets.only(top: 40)，这种硬编码适配会在不同设备上出错，推荐两种标准适配方式：

方式1：使用SafeArea组件（最推荐） #

SafeArea会自动识别设备的状态栏、底部导航栏等安全区域，自动添加内边距，适配所有平台：

return Scaffold(
  body: SafeArea( // 包裹整个body
    child: Column(
      children: [
        Container(
          margin: const EdgeInsets.only(bottom: 10),
          child: Container(
            // 移除固定的top margin
            width: double.infinity,
            height: 40,
            alignment: Alignment.topLeft,
            child: Image.asset('images/flutter.png'),
          ),
        ),
        Flexible(
          child: ListView(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            children: [
              Folders(
                name: "list",
                subTitle: null,
              ),
            ],
          )
        ),
      ],
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
  floatingActionButton: Container(
    width: 50.0,
    child: FloatingActionButton(
      backgroundColor: Colors.white,
      child: const Icon(
        Icons.search_sharp,
        color: MyStyle.mainColor,
        ),
      onPressed: () {
          ref.read(_modalProvider.notifier).update((state){
          showTopModalSheet<String?>(context, DumyModal());
        });
      },
    ),
  ),
);

方式2：通过MediaQuery获取状态栏高度 #

如果需要更精细的控制，可以手动获取状态栏高度来设置内边距：

return Scaffold(
  body: Column(
    children: [
      Container(
        margin: const EdgeInsets.only(bottom: 10),
        child: Container(
          // 动态获取状态栏高度
          margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
          width: double.infinity,
          height: 40,
          alignment: Alignment.topLeft,
          child: Image.asset('images/flutter.png'),
        ),
      ),
      Flexible(
        child: ListView(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          children: [
            Folders(
              name: "list",
              subTitle: null,
            ),
          ],
        )
      ),
    ],
  ),
  // 其余代码保持不变
);

关于悬浮按钮的适配 #

如果希望顶部悬浮按钮避开状态栏，可使用SafeArea包裹按钮容器：

floatingActionButton: SafeArea(
  child: Container(
    width: 50.0,
    child: FloatingActionButton(
      // 按钮原有代码不变
    ),
  ),
),

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