You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET MAUI中如何传递列表点击对象并在另一页面读取显示

问题描述

现有以下C#类定义:

public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
    public int PageCount { get; set; }
}
public class Bookshelf
{
    public List<Book> Books { get; set; }
}

将Bookshelf中的3个Book对象绑定到CollectionView后,在ViewModel中通过如下RelayCommand处理列表项点击事件,已实现将点击的Book对象传递到BookPage:

[RelayCommand]
async Task BookClicked()
{
    try
    {
        var navigationParameter = new Dictionary<string, object>
        {
            { "Book", book }
        };
        await Shell.Current.GoToAsync($"{nameof(BookPage)}", navigationParameter);
    }
    catch (Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }
}

请问如何在BookPage中获取传递过来的Book对象,并在页面上展示它的内容?


解决方案

方法一:使用QueryProperty特性(推荐)

这是MAUI Shell导航中接收参数最简洁的方式:

  1. 在BookPage对应的ViewModel中添加QueryProperty特性,指定参数名称和对应属性:
public class BookPageViewModel : ObservableObject
{
    private Book _selectedBook;
    public Book SelectedBook
    {
        get => _selectedBook;
        set => SetProperty(ref _selectedBook, value);
    }

    // 第一个参数是导航传递的参数键名,需和"Book"一致;第二个是ViewModel中绑定的属性名
    [QueryProperty(nameof(SelectedBook), "Book")]
    public BookPageViewModel() { }
}
  1. 在BookPage的XAML中绑定SelectedBook的属性到UI元素:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:YourAppNamespace.ViewModels"
             x:Class="YourAppNamespace.Views.BookPage"
             Title="Book Details">
    <ContentPage.BindingContext>
        <vm:BookPageViewModel />
    </ContentPage.BindingContext>

    <VerticalStackLayout Padding="20">
        <Label Text="Title:" FontAttributes="Bold" />
        <Label Text="{Binding SelectedBook.Title}" FontSize="Large" Margin="0,0,0,10"/>
        
        <Label Text="Author:" FontAttributes="Bold" />
        <Label Text="{Binding SelectedBook.Author}" FontSize="Medium" Margin="0,0,0,10"/>
        
        <Label Text="Page Count:" FontAttributes="Bold" />
        <Label Text="{Binding SelectedBook.PageCount}" FontSize="Medium"/>
    </VerticalStackLayout>
</ContentPage>

方法二:在页面导航生命周期中直接获取参数

如果不需要通过ViewModel处理,可直接在页面代码中提取参数:

  1. 在BookPage.xaml.cs中重写OnNavigatedTo方法,提取导航参数:
public partial class BookPage : ContentPage
{
    public BookPage()
    {
        InitializeComponent();
    }

    protected override void OnNavigatedTo(NavigatedToEventArgs args)
    {
        base.OnNavigatedTo(args);
        
        // 从导航参数中解析Book对象
        if (Navigation.Parameter is Dictionary<string, object> parameters && 
            parameters.TryGetValue("Book", out var bookObj) && 
            bookObj is Book book)
        {
            // 直接给UI元素赋值
            TitleLabel.Text = book.Title;
            AuthorLabel.Text = book.Author;
            PageCountLabel.Text = book.PageCount.ToString();
        }
    }
}
  1. 对应的XAML需要给UI元素命名:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.Views.BookPage"
             Title="Book Details">
    <VerticalStackLayout Padding="20">
        <Label Text="Title:" FontAttributes="Bold" />
        <Label x:Name="TitleLabel" FontSize="Large" Margin="0,0,0,10"/>
        
        <Label Text="Author:" FontAttributes="Bold" />
        <Label x:Name="AuthorLabel" FontSize="Medium" Margin="0,0,0,10"/>
        
        <Label Text="Page Count:" FontAttributes="Bold" />
        <Label x:Name="PageCountLabel" FontSize="Medium"/>
    </VerticalStackLayout>
</ContentPage>

内容的提问来源于stack exchange,提问作者eengstroem

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.15 08:07:25