发帖 回复
返回列表
  • 11745阅读
  • 2回复

[原创]“Why Not”使用QML实现一个MVVM框架 [复制链接]

 上一主题 下一主题
离线cycloveu
侠客
 
只看楼主 倒序阅读 楼主  发表于: 2017-04-12
— 本帖被 XChinux 执行加亮操作(2017-04-19) —

一.前言      

      最近几年最热门的技术之一就是前端技术了，各种前端框架，前端标准和前端设计风格层出不穷，而在众多前端框架中具有MVC，MVVM功能的框架成为耀眼新星，比如GitHub关注度很高的Vue.js ,由于是国人作品，其设计风格和文档友好度对国人而言更胜一筹。

二.认识MVVM

1.MVVM的结构

      MVVM是Model-View-ViewModel的简写。其结构如下图：

      View绑定到ViewModel，然后执行一些命令在向它请求一个动作。而反过来，ViewModel跟Model通讯，告诉它更新来响应UI。这样便使得为应用构建UI非常的容易。往一个应用程序上贴一个界面越容易，外观设计师就越容易使用Blend来创建一个漂亮的界面。同时，当UI和功能越来越松耦合的时候，功能的可测试性就越来越强。

2.MVVM的优点

      MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

      1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

      2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

      3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。

      4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

3.模块职责

      Model: 负责数据存储和业务逻辑。

      View: 负责展示数据。并将自身的变化同步到ViewModel中

      ViewModel: 对Model的封装，通过一系列属性暴露Model的状态，提供给View进行显示

三.怎么把QML和MVVM结合起来。

      我们知道VIew和ViewModel的双向绑定是MVVM架构的关键。WPF中使用data template、commands、data binding这些微软提供的技术进行数据绑定。那么我们的QT又有什么样的武器呢？没错就是Single/slots.

下面用一个简单的实例来说明怎么实现QML版的MVVM。

1.我们有一个登陆界面，用户输入账号和密码然后点击登陆按钮，并在界面上显示登陆信息。

QML页面代码

复制代码
  1. import QtQuick 2.7
  2. import QtQuick.Controls 2.0
  3. import QtQuick.Layouts 1.0
  5. ApplicationWindow {
  6.     visible: true
  7.     width: 320
  8.     height: 480
  9.     title: qsTr("MVVM")
  11.     header: ToolBar {
  12.         Text {
  13.             anchors.centerIn: parent
  14.             font.family: "微软雅黑"
  15.             font.pointSize: 16
  16.             color: "lightgreen"
  17.             text: qsTr("QML MVVM")
  18.         }
  19.     }
  21.     Column {
  22.         anchors.centerIn: parent
  23.         spacing: 5
  25.         TextArea {
  26.             id: nameTextArea
  27.             anchors.horizontalCenter: parent.horizontalCenter
  28.             placeholderText: qsTr("username")
  29.             text: mainViewModel.name
  30.             onTextChanged: mainViewModel.name = text
  31.         }
  33.         TextArea {
  34.             id: passwordTextArea
  35.             anchors.horizontalCenter: parent.horizontalCenter
  36.             placeholderText: qsTr("password")
  37.             text: mainViewModel.password
  38.             onTextChanged: mainViewModel.password = text
  39.         }
  41.         Button {
  42.             text: "Login"
  43.             anchors.right: parent.right
  44.             anchors.rightMargin: 5
  45.             onClicked: mainViewModel.loginButtonClicked()
  46.         }
  48.         Text {
  49.             id:stateText
  50.             anchors.horizontalCenter: parent.horizontalCenter
  51.             text: mainViewModel.state
  52.         }
  53.     }
  54. }

从代码可以看出：QML中控件的值和ViewModel中的属性主要通过这两句实现双向绑定的：

           text: mainViewModel.name      onTextChanged: mainViewModel.name = text

a.根据页面中的元素去设计对应的ViewModel层需要的那些属性：

name : QString

password : QString

state : QString

loginButtonClicked : signal

复制代码
  1. class MainViewModel : public QObject
  2. {
  3.     Q_OBJECT
  5.     Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
  6.     Q_PROPERTY(QString password READ password WRITE setPassword NOTIFY passwordChanged)
  7.     Q_PROPERTY(QString state READ state WRITE setState NOTIFY stateChanged)
  9. public:
  10.     explicit MainViewModel(QObject *parent = 0);
  12.     MainModel* model();
  13.     void setModel(MainModel *model);
  15.     QString name();
  16.     void setName(const QString &name);
  18.     QString password();
  19.     void setPassword(const QString &password);
  21.     QString state();
  22.     void setState(const QString &state);
  24.     Q_INVOKABLE void loginButtonClicked();
  26. signals:
  27.     void nameChanged(const QString &);
  28.     void passwordChanged(const QString &);
  29.     void stateChanged(const QString &);
  31. private:
  32.     QString m_name;
  33.     QString m_password;
  34.     QString m_state;
  36.     MainModel *m_model;
  37. };
复制代码
  1. MainViewModel::MainViewModel(QObject *parent) : QObject(parent),
  2.     m_model(NULL)
  3. {
  5. }
  7. MainModel *MainViewModel::model()
  8. {
  9.     return m_model;
  10. }
  12. void MainViewModel::setModel(MainModel *model)
  13. {
  14.     m_model = model;
  16.     if (m_model)
  17.     {
  18.         connect(this, &MainViewModel::nameChanged, m_model, &MainModel::setName);
  19.         connect(this, &MainViewModel::passwordChanged, m_model, &MainModel::setPassword);
  20.     }
  21. }
  23. QString MainViewModel::name()
  24. {
  25.     return m_name;
  26. }
  28. void MainViewModel::setName(const QString &name)
  29. {
  30.     m_name = name;
  31.     emit nameChanged(m_name);
  32. }
  34. QString MainViewModel::password()
  35. {
  36.     return m_password;
  37. }
  39. void MainViewModel::setPassword(const QString &password)
  40. {
  41.     m_password = password;
  42.     emit passwordChanged(m_password);
  43. }
  45. QString MainViewModel::state()
  46. {
  47.     return m_state;
  48. }
  50. void MainViewModel::setState(const QString &state)
  51. {
  52.     m_state = state;
  53.     emit stateChanged(state);
  54. }
  56. void MainViewModel::loginButtonClicked()
  57. {
  58.     if (m_model)
  59.     {
  60.         QString errorCode;
  61.         if (!m_model->login(&errorCode))
  62.         {
  63.             setState("Failed:" + errorCode);
  64.         }
  65.         else
  66.         {
  67.             setState("Successed");
  68.         }
  69.     }
  70. }

      我们通过在setModel函数中调用connect将ViewModel中属性的改变同步到Model中

b.在ViewModel层的loginButtonClicked函数中调用Model层的Login函数进行逻辑处理。Model层看起来是这样的:

name : QString

password : QString

bool login();

复制代码
  1. class MainModel : public QObject
  2. {
  3.     Q_OBJECT
  4. public:
  5.     explicit MainModel(QObject *parent = 0);
  7.     bool login(QString *error);
  9.     QString name();
  10.     void setName(const QString &name);
  12.     QString password();
  13.     void setPassword(const QString &password);
  15. private:
  16.     QString m_name;
  17.     QString m_password;
  18. };

最终登陆效果：

感谢你的阅读。谢谢。

by汏家的诚

2017.4.12
大道至简 悟在天成
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线hominlinx
禁止发言
只看该作者 1楼 发表于: 2017-06-23
你好， 能跟你交流下吗， 我的qq ： 295870332
回复
举报
离线cycloveu
侠客
只看该作者 2楼 发表于: 2017-08-21
在QML中实现双向绑定可以用一下方法
Binding {
                    target: nameText
                    property: "text"
                    value: viewModel.text
                }
                Binding {
                    target: viewModel
                    property: "text"
                    value: nameText.text
                }
大道至简 悟在天成
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个