OnPlatform 和 OnIdiom 是 .NET MAUI 中处理跨平台 UI 差异最常用、最轻量的两个标记扩展,它们不依赖代码后台,纯 XAML 即可完成适配。关键区别在于:OnPlatform 按操作系统(iOS/Android/Windows/macOS)区分,OnIdiom 按设备类型(Phone/Tablet/Desktop)区分。两者常配合使用,但不能混用同一个属性。
OnPlatform:按系统平台定制样式
适合解决因系统原生控件行为或默认样式不同带来的问题,比如 iOS 的安全区域偏移、Android 的输入法遮挡、Windows 的 DPI 缩放等。
支持简写语法:{OnPlatform Default=Red, Android=Blue, iOS=Pink},Default 可省略,未指定平台时自动回退到第一个值
复杂场景需显式声明类型:<onplatform x:typearguments="Thickness"></onplatform>,再用多个
<on platform="Android" value="0,10,0,0"></on>可用平台名包括:
Android、
iOS、
Windows、
macOS、
Default(推荐始终保留 Default 作为兜底)
OnIdiom:按设备形态定制布局
适合响应式 UI 场景,比如手机竖屏只显示核心按钮,平板横屏加一列参数面板,桌面端展示完整表格和工具栏。
支持简写:{OnIdiom Phone=200, Tablet=400, Desktop=800},也支持 Default回退 标准设备类型有:
Phone、
Tablet、
Desktop、
TV、
Watch(实际项目中主要用前三者) 注意:MAUI 不会自动识别“大屏手机”或“小屏平板”,它依赖运行时
DeviceInfo.Idiom枚举值,该值由系统 API 返回,基本可靠
什么时候该用哪个?看实际需求
如果问题根源是“这个控件在 iOS 上顶部被刘海挡住”,选 OnPlatform;如果是“手机上折叠菜单,桌面端展开为侧边栏”,选 OnIdiom。
字体大小适配 → 多用 OnPlatform(各系统默认字号不同) Margin/Padding 布局留白 → OnPlatform + OnIdiom 都可能用,先试 OnIdiom(Phone/Tablet 差异明显) 按钮圆角、阴影强度 → OnPlatform(iOS 偏好柔和,Android 偏好明确边界) 导航结构(抽屉 vs 顶部 Tab)→ OnIdiom(本质是交互范式差异,不是系统差异)可以嵌套或组合使用吗?
不能直接嵌套,但可以分层使用。例如:外层用 OnIdiom 控制整体布局结构,内部某个按钮的 Margin 再用 OnPlatform 微调对齐。
错误写法:<onidiom><onplatform>...</onplatform></onidiom>(XAML 解析失败) 正确思路:一个属性只用一种标记扩展;多个属性可分别用不同扩展 进阶替代:需要更复杂逻辑时,改用
Style+
VisualStateManager或 MVVM 绑定
DeviceInfo.Idiom和
DeviceInfo.Platform
基本上就这些。不需要写平台判断代码,也不用维护多套 XAML,两个标记扩展覆盖了 80% 的日常适配需求。
