效果如图
这里的很多数据是通过传参过来的的。
代码
例表页加入跳转功能:
<ListView ItemsSource="{Binding Items}" ItemAppearing="OnItemAppearing" ItemTapped="OnItemTapped" RowHeight="70" Margin="20">
后台加入 async void OnItemTapped(object sender, ItemTappedEventArgs e){if (e.Item is Product tappedProduct){Console.WriteLine($"Added item: Id={tappedProduct.Id}, ImageSource={tappedProduct.ImageSource}, ProductName={tappedProduct.ProductName}, Price={tappedProduct.Price}, Details={tappedProduct.Details} ImageSource={tappedProduct.ImageSource}");await Shell.Current.GoToAsync($"DetailsPage?id={tappedProduct.Id}&id={tappedProduct.ImageSource}&name={tappedProduct.ProductName}&price={tappedProduct.Price}&details={tappedProduct.Details}&img={tappedProduct.ImageSource}");}}
详情页:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="fenye.Views.DetailsPage"Title="{Binding Name}"><ScrollView><Grid RowDefinitions="Auto,Auto,*"><BoxViewBackgroundColor="{StaticResource Primary}"Grid.RowSpan="2"HorizontalOptions="Fill"VerticalOptions="Fill"/><Border StrokeShape="RoundRectangle 80"Stroke="White"StrokeThickness="6"HeightRequest="160"WidthRequest="160"Margin="0,8,0,0"HorizontalOptions="Center"VerticalOptions="Center"><Image Aspect="AspectFill"HeightRequest="160"HorizontalOptions="Center"VerticalOptions="Center"WidthRequest="160"><Image.Source><FileImageSource File="{Binding Img}" /></Image.Source></Image></Border><Label Style="{StaticResource LargeLabel}" Grid.Row="1"TextColor="White"FontAttributes="Bold"Text="{Binding Price}" HorizontalOptions="Center"Margin="0,0,0,8"/><VerticalStackLayout Grid.Row="2" Padding="10" Spacing="10"><Label Text="{Binding Details}" /></VerticalStackLayout></Grid></ScrollView>
</ContentPage>
using System.Collections.Generic;
using System.ComponentModel;
using System.Diagnostics;
using System.Runtime.CompilerServices;
using System.Xml.Linq;
using CommunityToolkit.Mvvm.ComponentModel;
using fenye.Model;namespace fenye.Views
{[QueryProperty(nameof(Id), "id")][QueryProperty(nameof(Name), "name")][QueryProperty(nameof(Img), "img")][QueryProperty(nameof(Price), "price")]public partial class DetailsPage : ContentPage, INotifyPropertyChanged{// public string Details = "已跳过加载符号。模块进行了优化,并且调试器选项“仅我的代码”已启用";private string details = "已跳过加载符号。模块进行了优化,并且调试器选项“仅我的代码”已启用";public string Details{get { return details; }set{details = value;OnPropertyChanged();}}private string name;public string Name{get { return name; }set{name = value;OnPropertyChanged();}}private string img;public string Img{get { return img; }set{img = value;OnPropertyChanged();}}private string price;public string Price{get { return price; }set{price = value;OnPropertyChanged();}}public DetailsPage(){InitializeComponent();BindingContext = this;}}
}