MAUI学习之始--数据绑定，命令绑定 MVVM 小白入门

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();

　　还有更高级的用法，比如依赖注入啥的。

　　欲知后事如何，且听下回分解。嘎嘎嘎