SuperAPI AI 工具集

maui-safe-area

前端与建站

查看项目

更新于 10-16 07:20

技能介绍

用途:该技能为 .NET MAUI(.NET 10+)提供安全区域与全屏布局指导,解决内容被状态栏、刘海、灵动岛或home指示条遮挡的问题,并处理键盘避让与沉浸式布局。

主要能力:介绍新的跨平台 SafeAreaEdges 属性与 SafeAreaRegions 标志枚举(None、SoftInput、Container、Default、All),支持按边(左/上/右/下)分别设置,覆盖 Android、iOS 和 Mac Catalyst。可组合 SoftInput 与 Container 同时避开系统栏和键盘。

使用方式:XAML 中用法类似 Thickness,如 SafeAreaEdges="Container"(统一)、"Container, SoftInput"(水平、垂直)、"Container, Container, Container, SoftInput"(四边);C# 中可用 new SafeAreaEdges(...) 构造。各控件有默认值,如 ContentPage 默认 None、Layout 默认 Container、ScrollView 默认 Default。

迁移:.NET 9 及更早版本无此 API,需使用旧版 ios:Page.UseSafeArea 与 Layout.IgnoreSafeArea。升级到 .NET 10 后 Android 的 ContentPage 默认从 Container 变为 None,若内容下沉可加 SafeAreaEdges="Container" 恢复。WindowSoftInputModeAdjust.Resize 仍可编译但不建议用于跨平台键盘避让。

适用场景:表单与关键输入、照片/视频/地图全屏、带固定头尾的可滚动内容、聊天底部输入栏、Blazor Hybrid(推荐用 CSS env(safe-area-inset-*) 并在 viewport 中加 viewport-fit=cover)。

限制:仅适用于 .NET 10+;Windows 无系统栏 inset;ScrollView 仅响应 Container 和 None,SoftInput 需包在外层 Grid;Blazor Hybrid 中避免 XAML 与 CSS 双重内边距。