2.Qt Quick快速入门之qml与C++交互

woaidaima2016

C++中使用qml对象，直接使用findChild获取qml对象，然后调用setProperty方法设置属性，当然必须在加载qml之后才能使用，不然findChild找不到对象，用法如下。

1. engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
   
2.     QObject * text_Msg = engine.rootObjects()[0]->findChild<QObject*>("text_Msg");
   
3.     text_Msg->setProperty("color","red");

复制代码

qml使用C++对象，这也是Qt中Model/View的实现方法，下面是一个例子。

　　首先，类需要继承自QObejct

1. class User:public QObject
   
2. {
   
3.     Q_OBJECT
   
4.     Q_PROPERTY(QString Name READ Name WRITE setName NOTIFY NameChanged)
   
5.     Q_PROPERTY(int Age READ Age WRITE setAge NOTIFY AgeChanged)
   
6.     Q_PROPERTY(QString Message READ Message WRITE setMessage NOTIFY MessageChanged)
   
7. public:
   
8.     User();
   
9.     User(string name,int age);
   
10. 
    
11.     QString Name();
    
12.     void setName(QString name);
    
13. 
    
14.     int Age();
    
15.     void setAge(int age);
    
16. 
    
17.     QString Message();
    
18.     void setMessage(QString message);
    
19. signals:
    
20.     void NameChanged();
    
21.     void AgeChanged();
    
22.     void MessageChanged();
    
23. public slots:
    
24. void editOk();   
    
25. 
    
26. private :
    
27.     QString m_name;
    
28.     int m_age;
    
29.     QString m_message;
    
30. };

复制代码

1. User::User()
   
2. {
   
3.   this->setName("");
   
4.   this->setAge(0);
   
5. }
   
6. User::User(string name, int age)
   
7. {
   
8.   QString q_name = QString::fromStdString(name);
   
9.   this->setName(q_name);
   
10.   this->setAge(age);
    
11. }
    
12. 
    
13. QString User::Name()
    
14. {
    
15.   return m_name;
    
16. }
    
17. void User::setName(QString name)
    
18. {
    
19.   m_name = name;
    
20.   emit NameChanged();
    
21.   setMessage(QString("名称改变为:%1").arg(name));
    
22. }
    
23. 
    
24. int User::Age()
    
25. {
    
26.   return m_age;
    
27. }
    
28. void User::setAge(int age)
    
29. {
    
30.   m_age = age;
    
31.   emit AgeChanged();
    
32.   setMessage(QString("年龄改变为:%1").arg(age));
    
33. }
    
34. 
    
35. QString User::Message()
    
36. {
    
37.     return m_message;
    
38. }
    
39. 
    
40. void User::setMessage(QString message)
    
41. {
    
42.     m_message = message;
    
43.     emit MessageChanged();
    
44. }
    
45. void User::editOk()
    
46. {
    
47.     setMessage("您点击了确定按钮");
    
48. }

复制代码

然后，需要向qml中注册这个类，这样我们在qml中就可以导入这个类了

1. qmlRegisterType<User>("Models.User",1,0,"UserModel");

复制代码

1. import Models.User 1.0

复制代码

通常，直接将对象设置到qml对象的上下文，然后在qml中使用C++对象的属性

1. QQmlApplicationEngine engine;
   
2.     QQmlContext* context = engine.rootContext();
   
3.     User* userModel = new User("测试",20);
   
4.     context->setContextProperty("testUserModel",userModel);

复制代码

1. GridLayout{
   
2.         anchors.centerIn: parent
   
3.         width:300
   
4.         columnSpacing: 10
   
5.         rowSpacing: 10
   
6.         rows:4
   
7.         columns:2
   
8. 
   
9.         Item{
   
10.             Layout.row: 0
    
11.             Layout.column: 0
    
12.             width:100
    
13.             height:30
    
14.             Text{
    
15.                 text:"Name:"
    
16.                 anchors.centerIn: parent
    
17.             }
    
18.         }
    
19.         Item{
    
20.             Layout.row: 0
    
21.             Layout.column: 1
    
22.             Layout.fillWidth: true
    
23.             height:30
    
24.             TextField{
    
25.                 anchors.verticalCenter: parent.verticalCenter
    
26.                 width:parent.width
    
27.                 height:24
    
28.                 id:textfield_Name
    
29.                 text: testUserModel.Name
    
30.                 onEditingFinished: {
    
31.                     testUserModel.Name = textfield_Name.text;
    
32.                 }
    
33.             }
    
34.         }
    
35. 
    
36.         Item{
    
37.             Layout.row: 1
    
38.             Layout.column: 0
    
39.             width:100
    
40.             height:30
    
41.             Text{
    
42.                 text:"Age:"
    
43.                 anchors.centerIn: parent
    
44.             }
    
45.         }
    
46.         Item{
    
47.             Layout.row: 1
    
48.             Layout.column: 1
    
49.             Layout.fillWidth: true
    
50.             height:30
    
51.             TextField{
    
52.                 anchors.verticalCenter: parent.verticalCenter
    
53.                 width:parent.width
    
54.                 height:24
    
55.                 id:textfield_Age
    
56.                 text:testUserModel.Age
    
57.                 onEditingFinished: {
    
58.                     testUserModel.Age = textfield_Age.text;
    
59.                 }
    
60.             }
    
61.         }
    
62. 
    
63.         Item{
    
64.             Layout.row: 2
    
65.             Layout.column: 0
    
66.             Layout.fillWidth: true
    
67.             height: 50
    
68.             Layout.columnSpan: 2
    
69.             RowLayout{
    
70.                 anchors.centerIn: parent
    
71.                 Button{
    
72.                     id:button_OK
    
73.                     text:"确定"
    
74.                     action: button_OK_Action
    
75.                     onClicked:{
    
76.                         testUserModel.editOk();
    
77.                     }
    
78.                 }
    
79.                 Button{
    
80.                     id:button_Cancel
    
81.                     text:"取消"
    
82.                     onClicked: {
    
83.                         Qt.quit();
    
84.                     }
    
85.                 }
    
86.             }
    
87.         }
    
88. 
    
89.         Item{
    
90.             Layout.row: 3
    
91.             Layout.column: 0
    
92.             Layout.fillWidth: true
    
93.             height: 30
    
94.             Layout.columnSpan: 2
    
95.             Text {
    
96.                 id: text_Msg
    
97.                 objectName: "text_Msg"
    
98.                 text: testUserModel.Message
    
99.                 anchors.fill: parent
    
100.                 verticalAlignment: Qt.AlignVCenter
     
101.             }
     
102.         }
     
103. 
     
104.     }

复制代码

在qml中绑定C++对象的属性时，其实是执行C++对象属性的READ方法；而设置属性时，则是执行WRITE方法；C++属性的NOTIFY方法用于属性变更通知，当我们调用该方法时（通常在前面加上emit表示这是个信号方法），qml中的属性绑定就会再次执行READ方法。

　　下面是效果，编辑框失去焦点时，就会设置属性，进而调用C++对象的WRITE方法，然后在WRITE方法中更新其他属性。