MAUI中CollectionView绑定数据不显示问题求助

核心问题：实体类使用字段而非属性 #

MAUI的数据绑定引擎仅支持带get/set的属性成员，你当前的Article类中Title、Image等都是普通字段，绑定无法识别这些字段，导致CollectionView无法渲染数据。

解决步骤 #

1. 修改实体类为属性格式 #

把所有字段改成带get/set的属性，修改后的代码如下：

public class Article
{
    [JsonProperty("title")]
    public string Title { get; set; }

    [JsonProperty("description")]
    public string Description { get; set; }

    [JsonProperty("content")]
    public string Content { get; set; }

    [JsonProperty("url")]
    public string Url { get; set; }

    [JsonProperty("image")]
    public string Image { get; set; }

    [JsonProperty("publishedAt")]
    public DateTime PublishedAt { get; set; }

    [JsonProperty("source")]
    public Source Source { get; set; }
}

public class Root
{
    [JsonProperty("totalArticles")]
    public int TotalArticles { get; set; }

    [JsonProperty("articles")]
    public List<Article> Articles { get; set; }
}

public class Source
{
    [JsonProperty("name")]
    public string Name { get; set; }

    [JsonProperty("url")]
    public string Url { get; set; }
}

2. 优化数据集合类型（可选但推荐） #

如果ArticleList是普通List<Article>，修改属性后虽能显示数据，但后续数据更新不会自动同步到UI。建议换成ObservableCollection<Article>，它会自动通知UI刷新：

// 在页面类中定义集合
private ObservableCollection<Article> ArticleList { get; set; } = new ObservableCollection<Article>();

protected override async void OnAppearing()
{
    base.OnAppearing();
    ApiService service = new ApiService();
    var newsResult = await service.GetNews();

    ArticleList.Clear();
    foreach(var item in newsResult.Articles)
    {
        ArticleList.Add(item);
    }

    // 若提前在XAML绑定了ItemsSource，这里无需重复赋值
    // CvNews.ItemsSource = ArticleList;
}

3. XAML优化建议 #

建议通过数据绑定而非直接赋值ItemsSource，同时增加图片加载失败的占位图：

<!-- 先给页面设置BindingContext -->
<ContentPage ... BindingContext="{x:Reference This}">
    <Grid>
        <CollectionView Grid.Row="2" x:Name="CvNews" ItemsSource="{Binding ArticleList}">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical" ItemSpacing="15"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="10">
                        <Image HeightRequest="200" Source="{Binding Image}" FallbackSource="default_image.png"/>
                        <Label FontSize="Medium" Text="{Binding Title}" LineBreakMode="WordWrap"/>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>
</ContentPage>

4. 额外检查点 #

• 确认API返回的Image是有效的网络URL，并且App已开启网络权限（Android需在AndroidManifest.xml添加<uses-permission android:name="android.permission.INTERNET" />；iOS需在Info.plist配置NSAppTransportSecurity允许HTTP请求）。
• 确认CollectionView所在的Grid Row有足够空间，比如用*而非固定高度，避免控件被压缩无法显示。

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