.NET MAUI实现首页新品CollectionView按需显示与隐藏的方法

方案一：通过ViewModel属性绑定（推荐） #

这种方式逻辑集中在ViewModel，更贴合MVVM模式。

1. 首页XAML添加新品CollectionView

在你的首页布局（如MainPage.xaml）中加入新品区域的CollectionView，绑定数据来源和显隐状态：

<!-- 新品展示区域 -->
<CollectionView 
    ItemsSource="{Binding NewProducts}"
    IsVisible="{Binding IsNewProductsVisible}"
    Margin="16,0">
    
    <!-- 自定义商品卡片模板，和你已有的Trending/Bestselling保持一致 -->
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame CornerRadius="8" Padding="8" Margin="8">
                <VerticalStackLayout>
                    <Image Source="{Binding ImageUrl}" Aspect="AspectFill" HeightRequest="120"/>
                    <Label Text="{Binding Name}" FontSize="14" FontAttributes="Bold"/>
                    <Label Text="{Binding Price, StringFormat='${0:F2}'}" FontSize="12" TextColor="Green"/>
                </VerticalStackLayout>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
    
    <!-- 可选：设置布局方式，比如水平滚动 -->
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Horizontal" Span="2"/>
    </CollectionView.ItemsLayout>
</CollectionView>

2. ViewModel中处理数据与显隐逻辑

使用CommunityToolkit.Mvvm简化属性变更通知（直接NuGet搜索安装即可）：

using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;

namespace YourApp.ViewModels;

public partial class MainPageViewModel : ObservableObject
{
    // 新品数据集合
    [ObservableProperty]
    private ObservableCollection<Product> _newProducts = new();

    // 控制新品区域显隐的属性
    public bool IsNewProductsVisible => NewProducts.Count > 0;

    // 加载新品数据的方法（替换为你的实际API请求逻辑）
    public async Task LoadNewProductsAsync()
    {
        // 模拟从API获取数据
        var newProducts = await YourApiClient.GetLatestProducts();
        
        // 更新集合
        NewProducts.Clear();
        foreach (var product in newProducts)
        {
            NewProducts.Add(product);
        }

        // 通知UI显隐状态已变化
        OnPropertyChanged(nameof(IsNewProductsVisible));
    }
}

// 商品模型示例（根据你的实际模型调整）
public class Product
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string ImageUrl { get; set; }
    public decimal Price { get; set; }
}

3. 页面绑定ViewModel并加载数据

在MainPage.xaml.cs中设置BindingContext并在页面显示时加载数据：

public MainPage()
{
    InitializeComponent();
    BindingContext = new MainPageViewModel();
}

protected override async void OnAppearing()
{
    base.OnAppearing();
    if (BindingContext is MainPageViewModel vm)
    {
        await vm.LoadNewProductsAsync();
    }
}

方案二：通过XAML DataTrigger直接控制 #

如果不想在ViewModel中新增属性，可以直接在XAML里用DataTrigger判断集合数量：

<!-- 先导入System命名空间 -->
xmlns:sys="clr-namespace:System;assembly=netstandard"

<!-- 新品展示区域 -->
<CollectionView ItemsSource="{Binding NewProducts}" Margin="16,0">
    <CollectionView.Triggers>
        <!-- 当新品数量为0时隐藏控件 -->
        <DataTrigger 
            TargetType="CollectionView"
            Binding="{Binding NewProducts.Count}"
            Value="{x:Static sys:Int32.Zero}">
            <Setter Property="IsVisible" Value="False"/>
        </DataTrigger>
    </CollectionView.Triggers>
    
    <!-- 商品模板和布局同方案一 -->
    <CollectionView.ItemTemplate>
        <!-- 你的商品卡片 -->
    </CollectionView.ItemTemplate>
</CollectionView>

这种方式不需要ViewModel额外处理显隐逻辑，直接通过XAML规则触发。

关键说明 #

• 核心逻辑都是基于NewProducts集合的数量来控制IsVisible属性，有数据显示、无数据隐藏。
• 使用ObservableCollection确保集合元素变化时UI能自动收到通知，避免数据更新后UI不刷新的问题。
• 如果手动实现INotifyPropertyChanged，记得在集合执行Clear/Add等操作后，触发IsNewProductsVisible的属性变更通知。

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