【MAUI】MVVM数据模型理解

本文介绍了MVVM模式的基本概念,Model负责数据层,View负责UI展示,ViewModel处理业务逻辑。在MAUI中,通过新建Model和ViewModel文件夹,实现页面逻辑。以MainPage.xaml为例,详细阐述了如何建立数据模型,如何通过INotifyPropertyChanged接口通知View数据变化,以及如何使用BindingContext和Command指令实现页面与ViewModel的绑定和交互。文章最后提到,使用MVVM的toolkits可以使处理过程更简化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是MVVM模式?

MVVM就是Model-View-ViewModel的缩写,它其实就是一种设计思想。
在这里插入图片描述

Model 数据模型 (主要负责对数据层的CRUD)
View UI视图,负责把数据的展现在页面
ViewModel 处理业务逻辑(表单提交,按键的点击都视为业务逻辑,需要在ViewModel里面进行处理)通俗点就可以理解成,用它来处理页面的控制逻辑。因为数据库数据结构是不允许直接跟View 层数据结构对应。需要专门定义一个数据对象用于对应的View控件上(这个数据对象就是ViewModel)。而这个ViewModel 就是把Model(数据模型层) 对象封装成接受View层界面输入的数据对象
1.在MAUI 中使用MVVM数据模式
1.1 新建两个文件夹用于存放Model和ViewModel 数据结构,View层直接就是页面
在这里插入图片描述

1.2 当前要处理MainPage.xaml 的页面逻辑,那就需要建立相对应的层的数据处理模式
在这里插入图片描述

2. 模型建立好后。例如,当前我们要MainPage.xaml 页面实现一个这样的功能,当触发页面按钮时,动态刷新页面数值信息。
2.1 首先在MainModel 建立对应的数据结构。
在这里插入图片描述

1.MainModel 必须要继承一个接口 INotifyPropertyChanged,因为只有通过继承该接口,才能通知View页面数据发现了改变,再重新渲染页面数据。

2. 封装属性快捷按键,输入 propfull 按两次tab

2.2 然后在MainViewModel 模型中,把MainModel封装对应的ViewMainModel 数据模型对象,然后进行实例化。
在这里插入图片描述

2.3 最后,绑定对应的MainViewModel模型渲染到对应View层

  • 第一步,MainPage.xaml 页面初始化时需要使用BindingContext 属性把MainViewModel 与页面进行绑定关联
    在这里插入图片描述

  • 第二步,数据模型绑定好后就可以在MainPage.xaml 页面使用 Binding 属性找到绑定MainViewModel数据对象,然后页面再用该数据对象通过.的方式就可以找到关联的MainModel 属性了
    在这里插入图片描述

  • 第三步,完成上面的步骤操作,数据已经正常跟页面进行绑定了
    在这里插入图片描述

3. 页面数据关联绑定好后,如何通过页面点击按钮时实现值的更改
3.1 是通过Command 指令,获取用户的界面操作
在业务逻辑层MainViewModel定义对应的Command 处理指令,并进行初始化。由于Command 初始化必须传入一个(委托)方法,所以需要指定处理的方法。
在这里插入图片描述

在界面使用Command 属性,绑定到MainViewModel 定义好的对应的指令
在这里插入图片描述

3.2 最后效果
在这里插入图片描述

说明:这是原有MVVM的处理方式,比较繁琐些。
下一篇:可以改用MVVM 的toolkits处理,会简单很多。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值