1.概要
本章将讲解如何在MAUI中使用简单的MVVM模式开发“ListView”内容的增删功能,MVVM在MAUI中也同样适用。
Microsoft.Toolkit.Mvvm
在学习之前我们先了解一个nuget包,它可以帮助我们省去一些代码的开发时间。包Microsoft.Toolkit.Mvvm (aka MVVM Toolkit) 是一个现代、快速、模块化的 MVVM 库。此包面向 .NET Standard,以便在任何应用平台上使用它:UWP、WinForms、WPF、Xamarin、Uno 等;在任何运行时:.NET Native、.NET Core、.NET Framework或 Mono。它在所有上运行。在所有情况下,API 图面都是相同的,因此非常适合生成共享库。在解决方案资源管理器中,右键单击项目,然后选择“管理NuGet包”。搜索 Microsoft.Toolkit。Mvvm 并安装它。
2.详细内容
Project
View
代码语言:javascript复制<Grid RowDefinitions="500,50">
<ListView ItemsSource="{Binding Temps}"/>
<StackLayout Grid.Row="1">
<Button WidthRequest="100" HeightRequest="25" Text="add" Command="{Binding AddCommand}"/>
<Button WidthRequest="100" HeightRequest="25" Text="add" Command="{Binding DeleteCommand}"/>
</StackLayout>
</Grid>
ViewModel
代码语言:javascript复制 //ViewModel需继承
public class MainViewModel : ObservableObject
{
private string _test;
private ObservableCollection<MainModel> _temps;
private ICommand addCommand;
private ICommand deleteCommand;
//数据通知集合
public ObservableCollection<MainModel> Temps { get => _temps; set => _temps = value; }
//命令
public ICommand AddCommand { get => addCommand ?? (addCommand = new RelayCommand(AddCallback));}
public ICommand DeleteCommand { get => deleteCommand ?? (deleteCommand = new RelayCommand(DeleteCallback)); }
//数据通知字段
public string Test { get => _test; set => SetProperty(ref _test , value); }
public MainViewModel()
{
//初始化
Temps = new ObservableCollection<MainModel>();
Temps.Add(new MainModel { Name = "zhangsan" });
Temps.Add(new MainModel { Name = "zhangsan" });
}
//命令执行内容
private void AddCallback()
{
Temps.Add(new MainModel { Name = DateTime.Now.ToString() });
}
private void DeleteCallback()
{
Temps.RemoveAt(0);
}
}
Model
代码语言:javascript复制public class MainModel
{
public string Name { get; set; }
public override string ToString()
{
return Name;
}
}