MAUI新生1.7-XAML语法基础：UI平台差异OnPlatform&OnIdiom

MAUI支持跨平台和多设备，可以针对不同平台（Android、iOS、WinUI、MacCatalyst、Tizen），或不同设备（Phone、Tablet、Desktop、TV、Watch），定制不同的UI，应用根据运行环境，自动适应。主要通过OnPlatform和OnIdiom两个标记扩展实现。如为复杂值，可以结合On来实现。在代码层面，OnPlatform<T>为泛型类，泛型参数T为要进行跨平台定制的UI属性。OnPlatform<T>有一个属性Platforms，该属性为IList<On>类型。

 

一、定制不同平台的UI

<!--简洁用法-->
<!--扩展标记中的第一个属性为Default，可以省略-->
<BoxView
    HorizontalOptions="Center"
    Color="{OnPlatform Default=Red,Android=Blue,iOS=Pink}"
    WidthRequest="{OnPlatform 250,Android=200,iOS=300}" />

<!--复杂用法-->
<!--属性Color的值类型为Color，所以通过x:TypeArguments指定泛型为Color-->
<BoxView>
    <BoxView.Color>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="Default" Value="Red"/>
            <On Platform="Android" Value="Green"/>
            <On Platform="iOS" Value="Blue"/>
        </OnPlatform>
    </BoxView.Color>
</BoxView>

 

二、定制不同设备的UI，和OnPlatform的使用基本一致，但复杂用法稍有不同。OnIdiom<T>类，直接定义了各种设备对应的属性，而OnPlatform<T>定义了一个集合属性Platforms。

<!--简洁用法-->
<!--扩展标记中的第一个属性为Default，可以省略-->
<BoxView
    HorizontalOptions="Center"
    Color="{OnIdiom Default=Red,Phone=Blue,Desktop=Pink}"
    WidthRequest="{OnIdiom 250,Phone=200,Desktop=300}" />

<!--复杂用法-->
<!--属性Color的值类型为Color，所以通过x:TypeArguments指定泛型为Color-->
<BoxView>
    <BoxView.Color>
        <OnIdiom x:TypeArguments="Color" Default="Red" Phone="AliceBlue" Desktop="Aqua"/>
    </BoxView.Color>
</BoxView>

 

三、总结：正常情况，使用大括号的标记扩展语法，表达更加简洁。