Xamarin 选项卡式页面 MVVM 在页面之间传递数据答案

【问题标题】：Xamarin Tabbed Pages MVVM Passing Data Between PagesXamarin 选项卡式页面 MVVM 在页面之间传递数据
【发布时间】：2020-09-08 16:11:41
【问题描述】：

我有一个名为“TabContainerPage”的 TabbedPage，它是两个 ContentPage 的容器。

<TabbedPage.Children>
        <me:TabbedPage1View Title="Tabbed Page 1" BindingContext="{Binding tabbedPage1ViewModel}" WidthRequest="400"/>
        <me:TabbedPage2View Title="Tabbed Page 2"/>
</TabbedPage.Children>

在 TabContaierPageViewModel 中，我对 TabbedPage1ViewModel 有一个名为“tabbedPage1ViewModel”的属性

public TabbedPage1ViewModel tabbedPage1ViewModel  { get; set; }

public TabContainerPageViewModel()
{
      tabbedPage1ViewModel = new TabbedPage1ViewModel ();
}

在 TabPage1ViewModel 我有一个项目列表

private List<Items> _items;

public List<Items> items
{
            get
            {
                return _items;
            }
            set
            {
                _items = value;
                OnPropertyChanged();
            }
}

我从 TabPage1View 导航到另一个名为“AddItemView”的页面。

顾名思义，我在 AddItemView 页面上添加了一个带有简单名称和描述的新项目。

当我单击返回按钮返回 TabPage1View 时，我想更新要在该页面上显示的项目列表。

我怎样才能做到这一点？

【问题讨论】：

使用 ObservableCollection 而不是 List，和/或在两个页面之间共享同一个 VM，或者使用 MessagingCenter，或者只是将对象引用传递给新项目
使用 Observable Collection 比使用 List 有什么好处？
添加/删除项目时，ObservableCollections 会引发 CollectionChanged 事件，以便您的 UI 可以自动更新
我正在从 Sqlite 数据库表中填充列表。所以从 Lists 切换到 ObservableCollections 对我来说是有利的吗？如何将 TabePage1ViewModel 的引用传递给 AddItemView？我在 TabPageContainer Xaml 中设置绑定上下文：<me:TabbedPage1View Title="Tabbed Page 1" BindingContext="{Binding tabbedPage1ViewModel}"/>
只需在Page2的构造函数中传递它

标签： c# xamarin mvvm viewmodel

【解决方案1】：

首先，将 List 改为 ObservableCollection。

ObservableCollection 自己实现了 OnPropertyChanged，也就是说当集合更新时，接口也会更新。

但是您仍然需要在 TabPage1View 上重新加载模型（在添加项目并从 AddItemView 返回之后）。

你有两个选择：

首先，最好实现一个 MessagingCenter。在关闭 AddItemView 之前触发消息，在 TabPage1View 中拦截消息，更新 Observable 并且您的屏幕也会更新。

其次，在 TabPage1View.PageAppearing 处执行相同操作。

最后一个提示：有时您需要逐个删除集合中的项目，然后添加新项目以触发 UI 刷新。

如果用新的 observabel 替换旧的 observabel，UI 可能不会刷新。

【讨论】：

我是否订阅来自 TabPage1ViewModel 的消息？我不明白如何访问标签页视图模型的实例，因为它是在 TabbedPageContainer 的 Xaml 文件中设置的，就像<me:TabbedPage1View Title="Tabbed Page 1" BindingContext="{Binding tabbedPage1ViewModel}"/>
是的，订阅tabbedPage1ViewModel中的消息。您不需要访问视图模型的特定实例。在您的 tabbedPage1ViewModel 中订阅消息：MessagingCenter.Subscribe<AddItemView, string>(this, "ItemAdded", (sender, arg) => { remove the itens from collection; add new itens to the collection; } 在 AddItemView 中，添加或删除一项后，触发消息：MessagingCenter.Send<AddItemView, string>(this, "ItemAdded", ItemId);