.NET MAUI Community Toolkit Popup在iOS端加载时UI崩溃求助

使用.NET Community Toolkit的Popup组件加载包含ListView的弹窗页面时，iOS平台出现UI崩溃，但Android平台运行正常。

打开Popup的代码：

this.ShowPopup(new FilterRequestPopupPage("ViewRequestsPage"));

Popup页面XAML代码：

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup 
   xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:local="clr-namespace:MyProject.Converter" 
    Color="Transparent"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="ListPMCaller.Views.Requests.FilterRequestPopupPage">

    <Border
        HorizontalOptions="CenterAndExpand"
        VerticalOptions="CenterAndExpand"
        x:Name="requeststatus_layout"
        Margin="15,0"
        Stroke="#e6e6e6"
        StrokeThickness="2"
        StrokeShape="RoundRectangle 20"
        Padding="0">

        <StackLayout
            Orientation="Vertical">

            <ListView
                VerticalOptions="Start"
                x:Name="requestfilter_listview"
                SeparatorColor="#cecece"
                ItemTapped="requestfilter_listview_ItemTapped"
                SelectionMode="None"
                CachingStrategy="RecycleElement"
                HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout 
                                Padding="5"
                                Margin="5"
                                Orientation="Vertical">
                                <Label 
                                    Text="{Binding statusTitle, Converter={StaticResource specialCharactorConverter}}"
                                    TextColor="{Binding TextColor}"
                                    Style="{StaticResource UserNameLabelStyle}"/>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Footer>
                    <Label/>
                </ListView.Footer>
            </ListView>
        </StackLayout>
    </Border>
</toolkit:Popup>

已准备示例项目，操作步骤：点击页面任意选项进入下一页，再点击右上角图标即可触发Popup。当前iOS端UI异常，附异常与预期UI截图。

解决方案 #

1. 替换ListView为CollectionView #

ListView在iOS的Popup环境下容易出现布局计算冲突，改用更轻量化的CollectionView可解决大部分适配问题，且无需ViewCell包装：

<CollectionView
    VerticalOptions="Start"
    x:Name="requestfilter_listview"
    SeparatorColor="#cecece"
    SelectionMode="None"
    ItemsLayout="VerticalList">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout 
                Padding="5"
                Margin="5"
                Orientation="Vertical">
                <Label 
                    Text="{Binding statusTitle, Converter={StaticResource specialCharactorConverter}}"
                    TextColor="{Binding TextColor}"
                    Style="{StaticResource UserNameLabelStyle}"/>
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

2. 给ListView设置明确高度 #

iOS平台上，Popup内的ListView可能无法自动计算正确高度，导致布局溢出崩溃，添加固定高度或动态绑定高度：

<ListView
    HeightRequest="300" <!-- 根据实际内容调整高度 -->
    VerticalOptions="Start"
    x:Name="requestfilter_listview"
    SeparatorColor="#cecece"
    ItemTapped="requestfilter_listview_ItemTapped"
    SelectionMode="None"
    CachingStrategy="RecycleElement"
    HasUnevenRows="True">
    <!-- 其余代码不变 -->
</ListView>

3. 调整Popup布局容器 #

将Popup内的StackLayout替换为Grid，或给外层Border添加明确的尺寸限制，避免容器无限扩展：

<Border
    HorizontalOptions="Center"
    VerticalOptions="Center"
    WidthRequest="300"
    HeightRequest="400"
    x:Name="requeststatus_layout"
    Margin="15,0"
    Stroke="#e6e6e6"
    StrokeThickness="2"
    StrokeShape="RoundRectangle 20"
    Padding="0">
    <Grid>
        <ListView
            <!-- 其余代码不变 -->
        </ListView>
    </Grid>
</Border>

4. 升级依赖版本 #

检查并升级.NET MAUI SDK和.NET Community Toolkit到最新稳定版，部分旧版本存在Popup与ListView的适配bug，新版本已修复。

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