.NET MAUI中Grid内CollectionView在iOS设备上显示异常问题

在.NET MAUI应用的MainPage中，使用Grid布局了4个等高（*）行，分别放置Label、CollectionView、Button、Label。该布局在Windows和Android平台显示正常，但在iPhone/iPad上，CollectionView高度会异常偏高，覆盖下方的Button和Label（甚至将其挤出屏幕）。只有为Grid.Row=1的行设置固定高度时，iOS平台的显示才会恢复正常。

环境 #

• Visual Studio 2022 版本17.6.1
• .NET 7.0

复现步骤 #

1. 创建一个.NET MAUI应用
2. 替换MainPage的XAML代码（给CollectionView设置浅蓝色背景）
3. 在Android模拟器运行查看效果
4. 在iOS模拟器运行对比效果

代码示例 #

<Grid BackgroundColor="LightGray" RowDefinitions="*,*,*,*">
    <Label Margin="10" FontSize="30" Text="Header" />
    <CollectionView Grid.Row="1" Margin="10" BackgroundColor="LightBlue">

    </CollectionView>
    <Button
        Grid.Row="2" Margin="10" BackgroundColor="Grey"
        FontSize="40" Text="Button" />
    <Label
        Grid.Row="3" Margin="10" BackgroundColor="Coral"
        FontSize="40" Text="Footer" />
</Grid>

解决方案 #

这个问题源于iOS平台上CollectionView的默认行为：当控件无内容时，它会尝试占据尽可能多的空间，打破Grid的*比例分配规则。以下是几种可行的解决方式：

1. 限制CollectionView的最大高度 #

直接给CollectionView添加MaximumHeightRequest属性，约束其高度上限，无需修改Grid的行定义：

<CollectionView Grid.Row="1" Margin="10" BackgroundColor="LightBlue"
                MaximumHeightRequest="250">
</CollectionView>

适合明确知道控件最大高度的场景。

2. 给Grid行设置最大高度 #

修改Grid的行定义，为第二行添加MaxHeight属性，结合*比例实现弹性且受限的高度分配：

<Grid BackgroundColor="LightGray">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*" MaxHeight="300"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Label Margin="10" FontSize="30" Text="Header" />
    <CollectionView Grid.Row="1" Margin="10" BackgroundColor="LightBlue">
    </CollectionView>
    <Button
        Grid.Row="2" Margin="10" BackgroundColor="Grey"
        FontSize="40" Text="Button" />
    <Label
        Grid.Row="3" Margin="10" BackgroundColor="Coral"
        FontSize="40" Text="Footer" />
</Grid>

3. 添加空状态模板 #

为CollectionView设置EmptyView，当无内容时显示空状态控件，此时CollectionView的高度会适配空模板的大小，避免无限扩展：

<CollectionView Grid.Row="1" Margin="10" BackgroundColor="LightBlue">
    <CollectionView.EmptyView>
        <Label Text="暂无数据" FontSize="18" HorizontalOptions="Center" VerticalOptions="Center"/>
    </CollectionView.EmptyView>
</CollectionView>

这种方式同时优化了空状态的用户体验，是更推荐的方案。

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