MVVM
MVVM(model-view-view-model)模型
之前在刚开始学Xamarin的时候,都是把页面的的表示文件(.xaml)和页面中的命令写在一起。一开始只有一两个页面还好,因为每个页面之间的联系都不是特别多,我们还能看得过来。修改的时候也还好,就想改哪里点哪里。
但是奥!但是!当我们页面变得特别多。然后呢,有几个常用的功能吧,就好多个页面都在用,我就不停的重复写,写啊写啊写.......巨麻烦。所以大佬们为了让各个代码之间的耦合性不是那么强,就发明了MVVM。(嗯~ o(* ̄▽ ̄*)o 我觉得应该是这样的吧,我也不知道想出MVVM的大佬咋想的,反正我是这么觉得的,哈哈哈哈哈哈)
(哦!刚才说的松耦合,我的理解就是让各个代码之间没那么大的联系,就是我没了你,我还能活=。=。然后代码之间模块化,还有就是比如说我要改一下命令,不用去页面里改了,就直接去 ViewModel 中改就行了,这样就防止我们哪改错了,导致页面都没法显示了。而且也不用吭哧吭哧的在那找了)
简单说一下MVVM的大概流程
首先我们在xaml文件中建立一个组件,就比如一个标签吧(<Label>),正常我们就是直接在Text属性后面放上我们要显示的东西了。这样虽然简单,但是它不能变啊=。=。所以我们就在Text后面放个变量,就叫它 a 吧。然后呢,我们要在xaml文件对应的 .xaml.cs 文件中建立xaml文件与负责后台处理功能的文件(就是ViewModel文件夹中的cs文件)的联系。最后在ViewModel中写要处理的内容。
下面是具体的步骤
首先吧,我们建立俩文件夹,一个叫Views,一个叫ViewModels。这两文件夹的作用,Views是为了放页面文件(xmal),ViewModels是为了放负责后台处理功能的文件。然后把MainPage.xaml放到Views中,就直接拖就行。
下面就是项目生成的时候自带的MainPage.xaml文件,我把其中没用的都给删除了。其中{Binding a}就是数据绑定的语句,"Binding"是固有的,"a"是我们定义的变量名,外边用{}给括上。
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp111.MainPage"> <StackLayout> <Label Text="{Binding a}"/> </StackLayout> </ContentPage>
然后我们就该去在它对应的MainPage.xaml.cs文件中创建与ViewModel文件的连接了。哦对了,我们还要在ViewModels文件夹中建立一个MainPageViewModel.cs的ViewModel文件哈,差点忘了 =。=
其中MainPage.xaml.cs文件是系统自动生成的奥!
接下来就在MainPage.xaml.cs文件中创建与ViewModel文件的连接,然后别忘了第一句那个,using一下ViewModels文件夹,要不程序找不到就MainPageViewModel =。=
using MauiApp111.ViewModels; namespace MauiApp111; public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); BindingContext = new MainPageViewModel(); // 这一句就是连接用的,然后别忘了上面要using一下ViewModels文件夹 } }
最后就是在MainPageViewModel.cs中创建要绑定的数据了
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Threading.Tasks; namespace MauiApp111.ViewModels { class MainPageViewModel : BindableObject { private string _a { get ; set; } // 这是变量 public string a // 这是属性,一般都不直接定义变量,都设置个属性给这个变量,然后去定义这个属性,为了保证数据安全 { get => _a; // lambda函数,相当于 return _a;
// 这里的判断是为了确保不无限循环的给属性 a 赋值,当变量 _a 不等于新传入的值的时候,再把这个值传递给属性 a 。 set { if (value != _a) { _a = value; OnPropertyChanged(nameof(a)); } } } public MainPageViewModel() { a = "Hello World!"; } } }
这是最后的输出结果,如果其中Home是自带的,如果觉得它看着难受,就去AppShell.xaml中,把Title = "Home"删掉就行
接下来是命令绑定了
和数据绑定特别像,同样的在MainPage.xaml文件中创建一个按钮,然后把它的命令写在MainPageViewModel.cs中
首先写个按钮,我们还是接着上面的写奥
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp111.MainPage"> <StackLayout> <Label Text="{Binding a}"/> <Button Text="点我啊!" Command="{Binding ButtonCommand}"/> </StackLayout> </ContentPage>
然后在MainPageViewModel.cs中增加命令语句
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Input; namespace MauiApp111.ViewModels { class MainPageViewModel : BindableObject { private string _a { get ; set; } // 这是变量 public string a // 这是属性,一般都不直接定义变量,都设置个属性给这个变量,然后去定义这个属性,为了保证数据安全 { get => _a; set { if (value != _a) { _a = value; OnPropertyChanged(nameof(a)); } } } // 这是新增加的命令 public ICommand ButtonCommand { get; set; } public MainPageViewModel() { a = "Hello World!"; ButtonCommand = new Command(ChangeA); // 在构造函数中声明一下这个命令,changeA是点击这个按钮时,实行的函数 } private void ChangeA() { a = "我变了!"; } } }
这是完事了的样子
点击一下“点我啊!”按钮之后,标签显示的属性a就会变成"我变了!"
当然,我这只是数据绑定最最最最最最最最基本的用法,连接的时候用的还是
BindingContext = new MainPageViewModel();
还有更高级的用法,比如依赖注入啥的。
欲知后事如何,且听下回分解。嘎嘎嘎
标签:文件,MVVM,--,xaml,绑定,System,MainPageViewModel,cs,using From: https://www.cnblogs.com/hjl1395589355/p/17662081.html