16:9
进行布局 , 高度不足 , 如果适配到全屏屏中 , 导致无法填充满整个屏幕 ;
位置适配 : 基于 屏幕 顶部 / 底部 摆放的组件 , 会出现偏移 , 没有按照设计位置摆放 ;
安全区域适配...: 在一些手机中 , 顶部有刘海 , 水滴 等摄像头位置 , 底部有话筒 , 这些位置不能填充组件 , 有被阻挡的风险 ;
二、全面屏适配的情况
----
全面屏适配要点 :
在页面中使用了 Scaffold...: 在 顶部 和 底部 留出足够的 安全区域 ;
方案一 : Flutter 中提供了一个 SafeArea 组件 , 使用该组件 包裹 页面 , 可以实现适配 ;
方案二 : 使用 MediaQuery.of...(context).padding 获取屏幕四个方向上的 Padding ;
四、反面示例 ( 留海遮挡内容 )
----
华为 Mate 30 手机中 , 使用如下代码 , 显示的内容 , 顶部没有预留足够的安全区域..."),
Text("底部内容"),
],
),
),
);
}
}
这是华为 Mate 30 的真机展示样式 ; 如果使用截图
云服务器
ICP备案
腾讯会议
云直播
对象存储
