.NET MAUI中OnIdiom与OnOrientation组合发布构建行高异常问题

问题原因 #

你当前的嵌套标记扩展写法在Debug模式下能正常解析，但Release构建时，XAML的AOT编译优化会导致嵌套的OnIdiom与OnOrientation标记扩展无法正确解析RowDefinitionCollection，从而出现异常的行高样式。

可靠解决方案 #

方案1：代码后台动态设置（最稳定） #

通过代码监听设备类型和屏幕方向变化，直接生成对应的RowDefinitionCollection，完全绕开XAML编译的潜在问题：

1. 给Grid命名：

<Grid x:Name="MainGrid" ColumnDefinitions="0.5*,0.5*" RowSpacing="20">
    <!-- 子控件 -->
</Grid>

2. 在页面后台添加逻辑：

private void UpdateGridRows()
{
    bool isPhone = DeviceInfo.Idiom == DeviceIdiom.Phone;
    bool isLandscape = DeviceDisplay.Current.MainDisplayInfo.Orientation == DisplayOrientation.Landscape;

    MainGrid.RowDefinitions.Clear();

    if (isPhone)
    {
        if (isLandscape)
        {
            MainGrid.RowDefinitions.Add(new RowDefinition(40));
            MainGrid.RowDefinitions.Add(new RowDefinition(0));
            MainGrid.RowDefinitions.Add(new RowDefinition(GridLength.Star));
            MainGrid.RowDefinitions.Add(new RowDefinition(100));
            MainGrid.RowDefinitions.Add(new RowDefinition(40));
        }
        else
        {
            MainGrid.RowDefinitions.Add(new RowDefinition(40));
            MainGrid.RowDefinitions.Add(new RowDefinition(40));
            MainGrid.RowDefinitions.Add(new RowDefinition(GridLength.Star));
            MainGrid.RowDefinitions.Add(new RowDefinition(150));
            MainGrid.RowDefinitions.Add(new RowDefinition(40));
        }
    }
    else
    {
        if (isLandscape)
        {
            MainGrid.RowDefinitions.Add(new RowDefinition(80));
            MainGrid.RowDefinitions.Add(new RowDefinition(100));
            MainGrid.RowDefinitions.Add(new RowDefinition(GridLength.Star));
            MainGrid.RowDefinitions.Add(new RowDefinition(100));
            MainGrid.RowDefinitions.Add(new RowDefinition(40));
        }
        else
        {
            MainGrid.RowDefinitions.Add(new RowDefinition(40));
            MainGrid.RowDefinitions.Add(new RowDefinition(40));
            MainGrid.RowDefinitions.Add(new RowDefinition(GridLength.Star));
            MainGrid.RowDefinitions.Add(new RowDefinition(150));
            MainGrid.RowDefinitions.Add(new RowDefinition(40));
        }
    }
}

protected override void OnAppearing()
{
    base.OnAppearing();
    UpdateGridRows();
    // 监听屏幕方向变化
    DeviceDisplay.Current.MainDisplayInfoChanged += (s, e) => UpdateGridRows();
}

protected override void OnDisappearing()
{
    base.OnDisappearing();
    DeviceDisplay.Current.MainDisplayInfoChanged -= (s, e) => UpdateGridRows();
}

方案2：资源字典分离定义+绑定（XAML友好） #

先在资源字典中定义四种场景的行集合，再通过MultiBinding结合自定义转换器来切换：

1. 在App.xaml或页面资源字典中定义：

<ResourceDictionary>
    <RowDefinitionCollection x:Key="PhonePortraitRows">40,40,*,150,40</RowDefinitionCollection>
    <RowDefinitionCollection x:Key="PhoneLandscapeRows">40,0,*,100,40</RowDefinitionCollection>
    <RowDefinitionCollection x:Key="TabletPortraitRows">40,40,*,150,40</RowDefinitionCollection>
    <RowDefinitionCollection x:Key="TabletLandscapeRows">80,100,*,100,40</RowDefinitionCollection>
</ResourceDictionary>

2. 创建自定义转换器：

public class IdiomOrientationRowConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length != 2 || values[0] is not DeviceIdiom idiom || values[1] is not DisplayOrientation orientation)
            return null;

        bool isPhone = idiom == DeviceIdiom.Phone;
        bool isLandscape = orientation == DisplayOrientation.Landscape;

        string resourceKey = isPhone 
            ? (isLandscape ? "PhoneLandscapeRows" : "PhonePortraitRows") 
            : (isLandscape ? "TabletLandscapeRows" : "TabletPortraitRows");

        return Application.Current.Resources[resourceKey];
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

3. 在页面中使用绑定：

<ContentPage.Resources>
    <local:IdiomOrientationRowConverter x:Key="RowConverter"/>
</ContentPage.Resources>

<Grid ColumnDefinitions="0.5*,0.5*" RowSpacing="20">
    <Grid.RowDefinitions>
        <MultiBinding Converter="{StaticResource RowConverter}">
            <Binding Path="Idiom" Source="{x:Static DeviceInfo.Current}"/>
            <Binding Path="MainDisplayInfo.Orientation" Source="{x:Static DeviceDisplay.Current}"/>
        </MultiBinding>
    </Grid.RowDefinitions>
    <!-- 子控件 -->
</Grid>

为什么原代码会出问题 #

.NET MAUI在Release构建时会启用AOT编译和XAML优化，嵌套的标记扩展（OnIdiom内部嵌套OnOrientation）的解析逻辑在优化过程中可能出现异常，导致RowDefinitionCollection无法正确生成，最终呈现出怪异的行高。

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