MAUI是微软推出的跨平台应用开发框架，支持在Windows、Android、iOS等多个平台运行，MVVM模式是Model-View-ViewModel的缩写，能够将界面逻辑和业务逻辑分离，大幅提升应用的可维护性和测试性。在MAUI开发中落地MVVM模式，核心是通过数据绑定和命令绑定实现视图和视图模型的解耦。
MVVM模式的核心组成
MAUI中的MVVM模式包含三个核心部分，各自职责明确：
- Model（模型）：负责封装业务数据和业务逻辑，比如用户信息、数据校验规则等，不依赖任何视图或视图模型。
- View（视图）：就是MAUI的页面，负责展示界面元素，通过数据绑定关联视图模型的数据和命令，不直接处理业务逻辑。
- ViewModel（视图模型）：作为视图和模型的中间层，封装视图需要的属性和命令，通知视图数据变化，处理用户交互逻辑。
基础实现步骤
第一步：定义Model层
首先创建简单的用户模型，包含用户的基本信息：
// 用户模型，实现属性变更通知接口
public class UserModel : INotifyPropertyChanged
{
private string _name;
private int _age;
// 用户姓名
public string Name
{
get => _name;
set
{
_name = value;
OnPropertyChanged();
}
}
// 用户年龄
public int Age
{
get => _age;
set
{
_age = value;
OnPropertyChanged();
}
}
// 属性变更通知事件
public event PropertyChangedEventHandler PropertyChanged;
// 触发属性变更通知的方法
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
第二步：编写ViewModel层
视图模型需要继承ObservableObject（MAUI内置的可观察对象基类，也可以自己实现INotifyPropertyChanged），定义视图需要的属性和命令：
// 用户视图模型
public class UserViewModel : ObservableObject
{
private UserModel _user;
private string _displayInfo;
// 用户模型实例
public UserModel User
{
get => _user;
set => SetProperty(ref _user, value);
}
// 展示信息
public string DisplayInfo
{
get => _displayInfo;
set => SetProperty(ref _displayInfo, value);
}
// 更新用户信息的命令
public ICommand UpdateUserCommand { get; }
public UserViewModel()
{
// 初始化用户数据
User = new UserModel
{
Name = "默认用户",
Age = 18
};
// 初始化命令，绑定执行方法
UpdateUserCommand = new Command(UpdateUser);
// 初始化展示信息
UpdateDisplayInfo();
}
// 更新用户信息的方法
private void UpdateUser()
{
User.Age += 1;
User.Name = $"用户_{DateTime.Now.Second}";
UpdateDisplayInfo();
}
// 更新展示信息
private void UpdateDisplayInfo()
{
DisplayInfo = $"姓名：{User.Name}，年龄：{User.Age}";
}
}
第三步：配置View层绑定
在MAUI的XAML页面中，设置页面的BindingContext为对应的视图模型，然后通过绑定语法关联属性和命令：
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:MauiMvvmDemo.ViewModels"
x:Class="MauiMvvmDemo.MainPage">
<!-- 设置页面绑定上下文为UserViewModel -->
<ContentPage.BindingContext>
<vm:UserViewModel />
</ContentPage.BindingContext>
<VerticalStackLayout Padding="20" Spacing="15">
<!-- 绑定展示信息属性 -->
<Label Text="{Binding DisplayInfo}" FontSize="20" />
<!-- 绑定用户姓名属性 -->
<Entry Text="{Binding User.Name, Mode=TwoWay}" Placeholder="输入用户姓名" />
<!-- 绑定用户年龄属性 -->
<Slider Value="{Binding User.Age, Mode=TwoWay}" Minimum="1" Maximum="100" />
<!-- 绑定更新命令 -->
<Button Text="更新用户信息" Command="{Binding UpdateUserCommand}" />
</VerticalStackLayout>
</ContentPage>
关键注意点
实现MAUI MVVM时需要注意几个核心问题：
- 所有需要绑定到视图的属性，所属的类必须实现
INotifyPropertyChanged接口，否则属性变化无法通知到视图更新。 - 命令绑定需要定义
ICommand类型的属性，通常使用Command或Command<T>类实现，避免使用事件直接处理交互逻辑。 - 绑定模式默认是
OneWay，如果需要视图修改后同步到视图模型，需要设置Mode=TwoWay，比如输入框、滑动条这类可编辑控件。 - 不要在视图模型中直接操作视图元素，所有界面相关的逻辑都应该通过数据绑定实现，保持视图和视图模型的解耦。
简单测试验证
运行上述代码后，页面会显示初始的用户信息，修改输入框的内容或者滑动滑动条，对应的用户属性会同步更新，点击更新按钮会触发命令，修改用户数据并刷新展示信息，说明MVVM模式的绑定和命令已经正常工作。