.NET MAUI iOS端ListView中Grid布局图片跨列占满问题

问题场景 #

在.NET MAUI的ListView中使用2列2行Grid布局，左侧图片占30%宽度、右侧文本占70%宽度。Android端和本地调试时显示正常，但iOS部署后，页面加载初期显示正常，随后图片会侵占文本区域，把文本挤到屏幕外侧。

异常表现 #

• 加载初期：图片约束在30%宽度内，文本正常展示
• 异常状态：图片占满整个Cell宽度，文本被挤出可见区域

修复方案 #

方案1：优化Grid列约束写法

iOS对0.3*这类小数比例的Star布局支持不够稳定，改用整数比例+最小宽度约束，同时给Image添加强布局约束：

<ListView ItemsSource="{Binding Comm_News}" Grid.Row="1"
          ItemTapped="Community_ItemTapped"                   
          RowHeight="120"
          VerticalScrollBarVisibility="Never" BackgroundColor="{StaticResource PageBack}"
          x:Name="news_list"
          Margin="15,0,15,15" SeparatorColor="LightGray">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:CommunityStory">
            <ViewCell>
                <Grid x:Name="ItemGrid" Padding="10" BackgroundColor="White" ColumnSpacing="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <!-- 用3*和7*替代0.3*、0.7*，同时给图片列加最小宽度防止过窄 -->
                        <ColumnDefinition Width="3*" MinWidth="80" />
                        <ColumnDefinition Width="7*" />
                    </Grid.ColumnDefinitions>
                    <Image Grid.RowSpan="2"
                           Source="{Binding ImageUrl}" 
                           Aspect="AspectFill"
                           HorizontalOptions="Fill"
                           VerticalOptions="Fill" />
                    <Label Grid.Column="1"
                           Text="{Binding Title}"
                           FontAttributes="Bold"
                           VerticalTextAlignment="Start"/>
                    <Label Grid.Row="1"
                           Grid.Column="1"
                           Text="Read more"
                           FontAttributes="Bold"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

方案2：改用自动行高替代固定RowHeight

固定RowHeight可能导致iOS在图片加载完成后重绘布局时，无法正确维持列比例。改用HasUnevenRows="True"让Cell自动计算高度：

<ListView ItemsSource="{Binding Comm_News}" Grid.Row="1"
          ItemTapped="Community_ItemTapped"                   
          HasUnevenRows="True" <!-- 替换原RowHeight="120" -->
          VerticalScrollBarVisibility="Never" BackgroundColor="{StaticResource PageBack}"
          x:Name="news_list"
          Margin="15,0,15,15" SeparatorColor="LightGray">
    <!-- ItemTemplate内容保持不变 -->
</ListView>

方案3：给Image绑定动态宽度约束

通过转换器绑定Grid的实际宽度，强制Image始终为Grid宽度的30%：

1. 实现百分比转换器：

namespace YourAppNamespace.Converters;

public class PercentageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is double gridWidth && double.TryParse(parameter?.ToString(), out double percentage))
        {
            // 减去Grid的Padding和ColumnSpacing，确保宽度准确
            return (gridWidth - 20 - 10) * percentage;
        }
        return 0;
    }

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

2. 在页面资源中注册转换器：

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

3. 修改Image的绑定：

<Image Grid.RowSpan="2"
       Source="{Binding ImageUrl}" 
       Aspect="AspectFill"
       WidthRequest="{Binding Source={x:Reference ItemGrid}, Path=Width, Converter={StaticResource PercentageConverter}, ConverterParameter=0.3}"
       HeightRequest="100" /> <!-- 可选：固定高度避免拉伸异常 -->

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