在我的 .NET8 MAUI 项目中，我有一个 CollectionView 来显示一些元素。此集合适用于 Windows 和 Android。

在我的 .NET8 MAUI 项目中，我有一个 CollectionView 用于显示一些元素的集合。此集合适用于 Windows 和 Android。

<CollectionView
    Margin="{OnIdiom '20,0,20,0',
                        Desktop='20,0,20,0'}"
    HorizontalOptions="FillAndExpand"
    IsVisible="{Binding ShowArticles}"
    ItemsSource="{Binding NewestArticles}"
    SelectionChanged="CollectionView_SelectionChanged"
    SelectionMode="Single"
    VerticalOptions="FillAndExpand">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout ItemSpacing="10" Orientation="Horizontal" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="artModel:NewestArticle">
            <Grid
                Margin="5,5,5,5"
                ColumnSpacing="10"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                WidthRequest="300">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Image
                    Grid.ColumnSpan="3"
                    Margin="0,0,0,15"
                    Aspect="AspectFill"
                    HeightRequest="200"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand"
                    WidthRequest="300">
                    <Image.Source>
                        <UriImageSource CacheValidity="10:00:00:00" Uri="{Binding FeaturedImage}" />
                    </Image.Source>
                    <Image.Clip>
                        <RoundRectangleGeometry CornerRadius="25" Rect="0,0,300,200" />
                    </Image.Clip>
                </Image>

                <VerticalStackLayout
                    Grid.Row="1"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
                    <components:LanguageLevelBadge
                        BgColor="{Binding BadgeColor}"
                        Text="{Binding BadgeText}"
                        VerticalOptions="StartAndExpand" />

                    <components:FlagBadge FlagUrl="{Binding FlagUrl}" />
                </VerticalStackLayout>

                <VerticalStackLayout
                    Grid.Row="1"
                    Grid.Column="1"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">

                    <Label Style="{StaticResource PostTitle}" Text="{Binding Title}" />
                    <Label Style="{StaticResource PostExcerpt}" Text="{Binding Excerpt}" />
                    <Label Style="{StaticResource PostCategory}" Text="{Binding Category}" />
                </VerticalStackLayout>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Windows 和 Android 的结果如下

和 iOS 的项目时 macOS ，渲染完全错误且不完整。

你知道这些平台是否存在问题吗 CollectionView ？我该如何解决这个问题？

更新/2

和 LanguageLevelBadge 是 FlagBadge 两个相似的组件。这里 LanguageLevelBadge

<?xml version="1.0" encoding="utf-8" ?>
<ContentView
    x:Class="LanguageInUse.Components.LanguageLevelBadge"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="llb">

    <HorizontalStackLayout BindingContext="{x:Reference llb}">
        <Label
            Margin="2"
            Padding="5,5"
            BackgroundColor="{Binding BgColor}"
            HorizontalOptions="Center"
            Text="{Binding Text}"
            TextColor="{Binding Color}"
            VerticalOptions="Center" />
    </HorizontalStackLayout>
</ContentView>

以及背后的代码

public partial class LanguageLevelBadge : ContentView
{
    public static readonly BindableProperty LevelProperty = BindableProperty.Create(nameof(Level), typeof(LanguageLevel), typeof(LanguageLevelBadge));
    public static readonly BindableProperty BgColorProperty = BindableProperty.Create(nameof(BgColor), typeof(string), typeof(LanguageLevelBadge));
    public static readonly BindableProperty ColorProperty = BindableProperty.Create(nameof(Color), typeof(string), typeof(LanguageLevelBadge), "#FFFFFF");
    public static readonly BindableProperty TextProperty = BindableProperty.Create(nameof(Text), typeof(string), typeof(LanguageLevelBadge));

    public string BgColor
    {
        get => GetValue(BgColorProperty) as string;
        set => SetValue(BgColorProperty, value);
    }

    public string Color
    {
        get => GetValue(ColorProperty) as string;
        set => SetValue(ColorProperty, value);
    }

    public string Text
    {
        get => GetValue(TextProperty) as string;
        set { 
            SetValue(TextProperty, value);
            BgColor = Level.GetColor();
        }
    }

    public LanguageLevel Level
    {
        get => (LanguageLevel)GetValue(LevelProperty);
        set => SetValue(LevelProperty, value);
    }

    public LanguageLevelBadge()
    {
        InitializeComponent();
    }
}

这是代码 FlagBadge

<?xml version="1.0" encoding="utf-8" ?>
<ContentView
    x:Class="LanguageInUse.Components.FlagBadge"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Name="fb">

    <Border
        Background="{Binding InternalFrameColor}"
        BindingContext="{x:Reference fb}"
        HorizontalOptions="FillAndExpand"
        MaximumHeightRequest="{Binding MaxHeight}"
        Stroke="{StaticResource Primary24}"
        StrokeShape="RoundRectangle 10"
        StrokeThickness="2"
        VerticalOptions="FillAndExpand">
        <Image
            x:Name="imageFlag"
            Aspect="AspectFill"
            MaximumHeightRequest="{Binding MaxHeight}"
            Source="{Binding FlagUrl}" />
    </Border>
</ContentView>

代码是

public partial class FlagBadge : ContentView
{
    #region Bindable properties

    public static readonly BindableProperty MaxHeightProperty = BindableProperty.Create(nameof(MaxHeight), typeof(double), typeof(WordCheck), (double)28);
    public static readonly BindableProperty FlagUrlProperty = BindableProperty.Create(nameof(FlagUrl), typeof(string), typeof(WordCheck));

    /// <summary>
    /// Gets or sets the maximum height.
    /// </summary>
    /// <value>The maximum height.</value>
    public double MaxHeight
    {
        get => (double)GetValue(MaxHeightProperty);
        set => SetValue(MaxHeightProperty, value);
    }

    /// <summary>
    /// Gets or sets the flag URL.
    /// </summary>
    /// <value>The flag URL.</value>
    public string FlagUrl
    {
        get => GetValue(FlagUrlProperty) as string;
        set => SetValue(FlagUrlProperty, value);
    }

    #endregion
    public FlagBadge()
    {
        InitializeComponent();
    }
}