maui sqlite开发一个商城加购物车的演示(2)

二个models

using System;
using System.Collections.ObjectModel;
using System.Runtime.Intrinsics.Arm;
using System.Windows.Input;

namespace ShoppingUI
{
    public class ProductPageViewModel
    {
        public ObservableCollection<Items> Items { get; set; }

        public ObservableCollection<Items> CartItems { get; set; }

        public Items SelectedItem { get; set; }

        public ICommand Itemclick { get; set; }
        public ICommand CartItemclick { get; set; }
        public ProductPageViewModel(INavigation navigation)
        {
            Items = new ObservableCollection<Items>
            {
                new Items
                {
                    Picture="watch.png",
                    Name = "百大非丽",
                    Description="百大非丽说明百大非丽说明百大非丽说明百大非丽说明百大非丽说明",
                    Quantity = "1",
                    Price = "99元"
                },
                new Items
                {
                    Picture="divingwatch.png",
                    Name = "电子表",
                    Quantity = "1",
                    Price = "89元",
                    Description="电子表丽说明百大非丽说明百大非丽说明百大非丽说明百大非丽说明",
                },
                new Items
                {
                    Picture="dresswatch.png",
                    Name = "小米",
                    Quantity = "1",
                    Price = "85元",
                      Description="小米丽说明百大非丽说明百大非丽说明百大非丽说明百大非丽说明",
                },
                new Items
                {
                    Picture="militarywatch.png",
                    Name = "华为电子表",
                    Quantity = "1",
                    Price = "99元",
                     Description="华为电子说明百大非丽说明百大非丽说明百大非丽说明百大非丽说明",
                },
                new Items
                {
                    Picture="wristwatch.png",
                    Name = "VIVO电子表",
                    Quantity = "1",
                    Price = "85元",
                     Description="VIVO电子表说明百大非丽说明百大非丽说明百大非丽说明百大非丽说明",

                },
                new Items
                {
                    Picture="militarywatch.png",
                    Name = "腕表",
                    Quantity = "1",
                    Price = "99元",
                    Description="腕表电子表说明百大非丽说明百大非丽说明百大非丽说明百大非丽说明",
                }
            };
            BackCommand = new Command(ExecuteBackCommand);
            CartItems = new ObservableCollection<Items> { };
            Itemclick = new Command<Items>(executeitemclickcommand);
            CartItemclick = new Command<Items>(executeCartitemclickcommand);
            this.navigation = navigation;
        }
        private INavigation navigation;

        async void executeitemclickcommand(Items item)
        {
            this.SelectedItem = item;
            await navigation.PushModalAsync(new DetailsPage(this));
        }

        async void executeCartitemclickcommand(Items item)
        {
            this.CartItems.Add(this.SelectedItem);
            await navigation.PushModalAsync(new CartPage(this));

        }

        private async void ExecuteBackCommand()
        {
            await Application.Current.MainPage.Navigation.PopAsync();
        }
        private readonly INavigation _navigation;

        public ICommand BackCommand { get; }
        private async void BackCommandExecute()
        {
            // 使用 Navigation 接口的 PopAsync 方法返回上一页
            await _navigation.PopAsync();
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             x:Class="ShoppingUI.ProductPage"
             Title="商品">
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="返回" Command="{Binding BackCommand}" />
    </ContentPage.ToolbarItems>
    <ContentPage.Content>
        <Grid RowDefinitions="auto,*" Padding="0,10,0,0" Background="#292B2D">
            <Label Text="商品" TextColor="White" FontSize="30" FontAttributes="Bold" HorizontalTextAlignment="Center" Margin="0,0,0,30"/>
            <BoxView Grid.Row="1" CornerRadius="20,20,0,0" Color="White">
                
            </BoxView>
            <syncfusion:SfListView x:Name="listView" ItemSpacing="5,0,0,0" Grid.Row="1" Margin="0,10,0,0"
                   ItemsSource="{Binding Items}"    ItemSize="120">

            <syncfusion:SfListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="0,0,0,0" RowDefinitions="*,4" ColumnDefinitions="120,*,*">
                            <Frame HeightRequest="100" WidthRequest="100" HasShadow="False" Grid.Column="0" Grid.RowSpan="2" CornerRadius="10" BackgroundColor="White"  VerticalOptions="CenterAndExpand">
                                <Image Source="{Binding Picture}"  Aspect="AspectFill" />
                            </Frame>
                            <StackLayout Grid.RowSpan="2" Grid.Column="1" VerticalOptions="Center">
                                <Label Text="{Binding Name}"  Padding="10,0,0,10" FontSize="17" FontAttributes="Bold"/>
                                <Label  Text="{Binding Price}" Padding="10,0,0,0" FontAttributes="Bold" FontSize="20" TextColor="#2C363C"/>
                            </StackLayout>
                            <Grid Grid.Column="3" VerticalOptions="Center">
                                <Button  FontSize="13"  Margin="0,0,10,0" BackgroundColor="#2C363C" Text="查看" Command="{Binding Source={x:Reference listView},Path=BindingContext.Itemclick}" CommandParameter="{Binding}" TextColor="White" HorizontalOptions="End" HeightRequest="40" WidthRequest="70"/>
                            </Grid>
                            <Grid Grid.Row="1" Grid.ColumnSpan="3">
                                <Label Background="LightGray" Margin="2" HeightRequest="1"/>
                            </Grid>
                        </Grid>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
        </syncfusion:SfListView>
        </Grid>
       
    </ContentPage.Content>
</ContentPage>