网格内的 .NET MAUI CollectionView 在 iPhone/iPad 上未正确显示

.NET MAUI CollectionView inside a Grid not shown correct on iPhone/iPad

提问人:Haimo 提问时间:5/25/2023 更新时间:5/26/2023 访问量:747

问:

一个简单的 .Net MAUI 应用的 MainPage 包含一个包含 4 行的网格,所有行的高度都相同 (*)。它们包含:Label、CollectionView、Button、Label 在 Windows 和 Android 上,页面显示正确。 但是在 iPhone/iPad 上,CollectionView 太高了。它覆盖了下面的按钮和标签(或者将它们推到屏幕之外)

使用 Grid.Row=1 的修复值时,不会发生此问题

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>

Android vs iPhone

.NET iPhone iPad 毛伊 岛集合View

评论


答:

2赞 Alexandar May - MSFT 5/26/2023 #1

这是 GitHub 上报告的已知问题 - 使 iOS 上的 CollectionView 测量到内容大小 #14951 和 [iOS] 应用程序在 iOS 上使用 ScrollView、StackLayout、Editor 和 CollectionView #14955 的组合卡住,请关注 GitHub 上的进度。

如第一个合并线程中所述,要解决此问题,PG 团队需要修改 iOS 上的 以将其用作 的值;这会强制 to 调整其内容的大小,而不是尝试填充整个屏幕。因此,我们可能需要下一个版本的 .net 来修复它。CollectionViewContentSizeGetDesiredSizeCollectionView

还可以尝试使用 .NET 升级助手升级到 .NET 8 作为替代解决方法。有关详细信息,请参阅宣布推出支持 .NET MAUI 的新版本的 .NET 升级助手

评论

0赞 Haimo 5/27/2023
THX Alexandar May 提供升级助手的链接,我要尝试!
0赞 Alexandar May - MSFT 6/6/2023
@Haimo感谢您的回复!或者,可以将 Visual Studio 2022 还原为版本 。我已经测试过了,效果很好。17.5.5
0赞 Alexandar May - MSFT 6/23/2023
我已经好几天没有收到你的消息了。如果有什么我可以在这里提供帮助,请告诉我。
0赞 Haimo 6/24/2023
谢谢,但我实施了自己的解决方法。对于下一个版本,我将尝试 C#8
1赞 Haimo 7/2/2023
这是我在 iOS 上解决 CollectionView 问题的方法: - CollectionView 位于 Grid 内部 - 添加方法以计算代码隐藏中网格行的高度并从构造函数中调用它 /// <summary> /// mainGrid:页面内的网格 /// collViewRow:CollectionView 的 Grid.Row /// </summary> private void CalculateSize() { double all = 0; // mainGrid foreach 中的行高度(mainGrid.RowDefinitions 中的 RowDefinition 行) { all += row.高度值;} double diff = 这个。Size.Height - 全部;设置高度 collViewRow.Height = collViewRow.Height.Value + diff;}