(04).NET MAUI实战 MVVM

2022-12-07 20:32:15 浏览数 (1)

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;
    }
}
Run

0 人点赞