क्यूएमएल और सी ++। एक गुच्छा का एक सरल उदाहरण

QML तकनीक सुंदर और आंख को भाती है। वह मुझमें बहुत दिलचस्पी ले रही थी, और मैंने इसे मास्टर करने का फैसला किया। लेकिन यह यहाँ नहीं था, क्योंकि मैं बेवकूफ और असहाय था। मुझे नेटवर्क पर कहीं भी (डमी के लिए "एक उदाहरण नहीं मिला (मैंने शायद खराब तरीके से खोजा था) स्क्रैच के संयोजन में एक सरल क्यूएमएल और सी ++ एप्लिकेशन बनाने के लिए। हर जगह कुछ गायब था: या तो क्यूटी निर्माता को ध्यान में नहीं रखा गया था, या कोड ने त्रुटियों को फेंक दिया था, या ऐसे कोई पूरे क्षण नहीं थे जो उपयोगकर्ताओं को स्वयं पता होना चाहिए। आधिकारिक दस्तावेज और हब पर यहां के उदाहरण भी इन कमियों के साथ थे। इसलिए मैंने एक विस्तृत विवरण के साथ शुरुआती लोगों के लिए इस तरह के लेख को लिखने के लंबे प्रयासों और गलतियों के बाद फैसला किया।

चुनौती । आपको C ++ के साथ संयोजन के रूप में एक QML प्रोग्राम लिखने की आवश्यकता है, जहां
1. फॉर्म में एक बटन, एक इनपुट लाइन और एक आउटपुट फ़ील्ड है।
2. इनपुट लाइन से एक संख्या को पढ़ना आवश्यक है, 1 जोड़ा गया है, और उत्तर आउटपुट फ़ील्ड में प्रदर्शित किया गया है।
3. इंटरफ़ेस QML में लिखा गया है।
4. C ++ में कार्यात्मक, अर्थात, हमें QML और C ++ के बीच संबंध सुनिश्चित करने की आवश्यकता है: QML बटन C ++ फ़ंक्शन को कॉल करता है, और फ़ंक्शन QML ऑब्जेक्ट के गुणों को बदलता है।

एक बुनियादी QML अनुप्रयोग बनाना

हम क्यूटी क्रिएटर का इस्तेमाल करते हैं। मैंने Qt 4.7.4 के साथ 2.3 संस्करण का उपयोग किया

QML अनुप्रयोग बनाना

1. GUI एप्लिकेशन बनाएं: फ़ाइल -> नई फ़ाइल या प्रोजेक्ट ...। वहां, बाईं ओर, Qt GUI प्रोजेक्ट चुनें , दाईं ओर Qt GUI एप्लिकेशन के साथ। फिर नीचे बटन " Select ... " पर क्लिक करें ।


2. अगली विंडो में, हमारी परियोजना का नाम चुनें (रिक्त स्थान और रूसी अक्षरों के बिना)। उदाहरण के लिए, हमारे मामले में यह " उदाहरण " है।


3. अगली विंडो में, आपके पास " डेस्कटॉप " के बगल में एक चेकमार्क होना चाहिए। यदि आपके पास यह नहीं है, तो आपने गलत तरीके से क्यूटी क्रिएटर स्थापित किया है (या आप जानबूझकर डेस्कटॉप एप्लिकेशन नहीं बनाना चाहते हैं)। कि क्यूटी क्रिएटर आधिकारिक असेंबली, जिसे मैंने (2.3) स्थापित किया था, किसी कारण से डिफ़ॉल्ट रूप से डेस्कटॉप भागों को स्थापित नहीं किया था।


4. अगली विंडो में, " एक फ़ॉर्म बनाएँ " को अनचेक करें ।


5. अगली विंडो में, आप कुछ भी नहीं बदल सकते हैं। और " समाप्त " बटन पर क्लिक करें।

एक परियोजना फ़ाइल का संपादन

6. परियोजना फ़ाइल को संपादित करें (हमारे पास यह example.pro है ):


और लाइन में जोड़ें " क्यूटी + = कोर गुई " शब्द " घोषणात्मक "। नतीजतन, हमें लाइन मिलती है:

QT += core gui declarative 

QML प्रोजेक्ट बनाना

7. क्यूटी निर्माता में परियोजना के साथ फ़ोल्डर पर राइट-क्लिक करें और आइटम पर जाएं " नया जोड़ें ... "


8. बाईं ओर " QML " और दाईं ओर " QML फ़ाइल " चुनें।


9. इसे " मुख्य " कहें ।


10. अगली विंडो अपरिवर्तित है।


11. परिणामस्वरूप, हमें पाठ के साथ फ़ाइल "main.qml" मिलती है:

 import QtQuick 1.0 Rectangle { width: 100 height: 62 } 

एक संसाधन फ़ाइल बनाएँ

12. क्यूटी निर्माता में परियोजना के साथ फ़ोल्डर पर राइट-क्लिक करें और आइटम पर जाएं " नया जोड़ें ... "



13. बाईं ओर " Qt " और दाईं ओर " Qt संसाधन फ़ाइल " का चयन करें।


14. चलो इसे रेस कहते हैं।


15. अगली विंडो अपरिवर्तित है।


परिणामस्वरूप, हमें फ़ाइल " res.qrc " मिलती है

16. उपसर्ग जोड़ें। ऐसा करने के लिए, " जोड़ें " बटन पर क्लिक करें, और फिर " जोड़ें उपसर्ग " पर क्लिक करें।


17. उपसर्ग पाठ को " / " में बदलें।


18. हमारी QML फ़ाइल जोड़ें। ऐसा करने के लिए, " जोड़ें " बटन पर क्लिक करें, और " फाइलें जोड़ें " पर क्लिक करें।


19. और हमारी फाइल " main.qml " चुनें। और फ़ाइल हमारे आवेदन के संसाधनों में जोड़ दी जाएगी:


यदि हम अपना एप्लिकेशन अभी चलाते हैं, तो तब तक qml देखें जब तक हम देखें:

स्रोत संपादन

अब काम करने के लिए qml प्लगइन प्राप्त करते हैं।

20. हम फ़ाइल को " mainwindow.h " (हेडर में स्थित) संपादित करने के लिए आगे बढ़ते हैं। इसका अब तक का रूप है:

 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QtGui/QMainWindow> class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = 0); ~MainWindow(); }; #endif // MAINWINDOW_H 

इसे इस दृश्य में बदलें:

 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QtDeclarative/QDeclarativeView> #include <QGraphicsObject> #include <QtGui> #include <QDeclarativeContext> namespace Ui { class MainWindow; } class MainWindow : public QMainWindow { Q_OBJECT public: explicit MainWindow(QWidget *parent = 0); ~MainWindow(); private: QDeclarativeView *ui; }; #endif // MAINWINDOW_H 

हमने #include <QtDeclarative / QDeclarativeView> , #include <QGraphicsObject> और अन्य नाम जोड़े, नाम जोड़ा, स्पष्ट कीवर्ड जोड़ा, और सबसे महत्वपूर्ण रूप से जोड़ा गया QDeclaricsView * ui ।

21. अब mainwindow.cpp फ़ाइल को संपादित करते हैं। इसका अब तक का रूप है:

 #include "mainwindow.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { } MainWindow::~MainWindow() { } 

इसे बदलें:

 #include "mainwindow.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { //  QML ui = new QDeclarativeView; ui->setSource(QUrl("qrc:/main.qml")); setCentralWidget(ui); ui->setResizeMode(QDeclarativeView::SizeRootObjectToView); } MainWindow::~MainWindow() { // QML delete ui; } 

22. हमारे एप्लिकेशन को चलाएं और एक सफेद विंडो प्राप्त करें। हमारी क्यूएमएल ने कमाई की है।

अनुप्रयोग लेखन

अब हम सीधे आवेदन लिखने के लिए आगे बढ़ सकते हैं, जो हमारी समस्या को हल करेगा।

एक इंटरफ़ेस बनाएँ।

23. इस समय, main.qml इस तरह दिखता है:

 import QtQuick 1.0 Rectangle { width: 100 height: 62 } 

हम इसे मुख्य आयत-विंडो को बदलकर संपादित करेंगे:

 import QtQuick 1.0 //  Rectangle { width: 300 height: 300 anchors.fill: parent } 

24. हमारे फ़ॉर्म में सबसे सरल बटन जोड़ें।

  // Rectangle { id: button //  //   x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2; //  width: 100 height: 30 //  color: "gray" //  Text { id: buttonLabel text: "" anchors.centerIn: parent; } //  MouseArea { anchors.fill: parent id: mouseArea } } 

परिणामस्वरूप, main.qml फॉर्म लेगा:

 import QtQuick 1.0 Rectangle { width: 300 height: 300 anchors.fill: parent // Rectangle { id: button //  //   x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2; //  width: 100 height: 30 //  color: "gray" //  Text { id: buttonLabel text: "" anchors.centerIn: parent; } //  MouseArea { anchors.fill: parent id: mouseArea } } } 

यदि हम एप्लिकेशन चलाते हैं,

फिर हमें निम्नलिखित मिलते हैं:


25. एक इनपुट लाइन जोड़ें जहां उपयोगकर्ता टेक्स्टिनपुट नाम के साथ जानकारी दर्ज करेगा।

 //  Rectangle { id: textinputRect //   //  x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2+40; //   width: 100 height: 18 //   color: "gray" TextInput { id: textinput objectName: "textinput" color: "#151515"; selectionColor: "blue" font.pixelSize: 12; width: parent.width-4 anchors.centerIn: parent focus: true text:"1" } } 

परिणामस्वरूप, main.qml फॉर्म लेगा:

 import QtQuick 1.0 Rectangle { width: 300 height: 300 anchors.fill: parent // Rectangle { id: button //  //   x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2; //  width: 100 height: 30 //  color: "gray" //  Text { id: buttonLabel text: "" anchors.centerIn: parent; } //  MouseArea { anchors.fill: parent id: mouseArea } } //  Rectangle { id: textinputRect //   //  x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2+40; //   width: 100 height: 18 //   color: "gray" TextInput { id: textinput objectName: "textinput" color: "#151515"; selectionColor: "blue" font.pixelSize: 12; width: parent.width-4 anchors.centerIn: parent focus: true text:"1" } } } 

कृपया निम्नलिखित पर ध्यान दें:

• ताकि हम सी + + से इनपुट लाइन तक पहुंच सकें, आईडी पैरामीटर के अलावा, हमारे पास ऑब्जेक्टनेम पैरामीटर भी है, जो दोहरे उद्धरण चिह्नों में संलग्न है।
• तब हमें जो जानकारी की आवश्यकता होगी वह पाठ पैरामीटर में निहित है।

स्टार्टअप पर, हमें निम्नलिखित मिलते हैं:


26. एक आउटपुट फ़ील्ड जोड़ें जहां प्रोग्राम नाम मेमो के साथ एक उत्तर आउटपुट करेगा।

  //  Rectangle { id: memoRect //   //  x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2+70; //   width: 100 height: 35 //   color: "gray" TextEdit{ id: memo objectName: "memo" wrapMode: TextEdit.Wrap width:parent.width; readOnly:true } } 

परिणामस्वरूप, main.qml फॉर्म लेगा:

 import QtQuick 1.0 Rectangle { width: 300 height: 300 anchors.fill: parent // Rectangle { id: button //  //   x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2; //  width: 100 height: 30 //  color: "gray" //  Text { id: buttonLabel text: "" anchors.centerIn: parent; } //  MouseArea { anchors.fill: parent id: mouseArea } } //  Rectangle { id: textinputRect //   //  x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2+40; //   width: 100 height: 18 //   color: "gray" TextInput { id: textinput objectName: "textinput" color: "#151515"; selectionColor: "blue" font.pixelSize: 12; width: parent.width-4 anchors.centerIn: parent focus: true text:"1" } } //  Rectangle { id: memoRect //   //  x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2+70; //   width: 100 height: 35 //   color: "gray" TextEdit{ id: memo objectName: "memo" wrapMode: TextEdit.Wrap width:parent.width; readOnly:true } } } 

स्टार्टअप पर, हमें निम्नलिखित मिलते हैं:


इसलिए, हमने अपने कार्यक्रम के इंटरफ़ेस का वर्णन किया।

C ++ भाग

27. बटन दबाते समय, अभी तक कुछ भी नहीं होता है। इसे ठीक करें। सबसे पहले, आइए QML मॉडल और C ++ कोड के बीच संबंध स्थापित करें। ऐसा करने के लिए, मेनविंडो . cpp फ़ाइल को संपादित करें, अर्थात् मेनविंडो फ़ंक्शन, लाइनों को जोड़ते हुए:

  //   Root = ui->rootObject(); // C++  QML,    ++   window ui->rootContext()->setContextProperty("window", this); 

हम निम्नलिखित प्राप्त करते हैं:

 #include "mainwindow.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { //  QML ui = new QDeclarativeView; ui->setSource(QUrl("qrc:/main.qml")); setCentralWidget(ui); ui->setResizeMode(QDeclarativeView::SizeRootObjectToView); //   Root = ui->rootObject(); // C++  QML,    ++   window ui->rootContext()->setContextProperty("window", this); } MainWindow::~MainWindow() { // QML delete ui; } 

28. जोड़े गए कोड में, हमारे पास एक अघोषित परिवर्तनीय रूट है । इसके माध्यम से, हम फिर अन्य सभी बाल तत्वों की खोज करेंगे। इसे निजी अनुभाग में वर्ग में mainwindow.h में घोषित करें:

 QObject *Root;//  QML  

नतीजतन, हम प्राप्त करते हैं:

 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QtDeclarative/QDeclarativeView> #include <QGraphicsObject> #include <QtGui> #include <QDeclarativeContext> namespace Ui { class MainWindow; } class MainWindow : public QMainWindow { Q_OBJECT public: explicit MainWindow(QWidget *parent = 0); ~MainWindow(); private: QDeclarativeView *ui; QObject *Root;//  QML  }; #endif // MAINWINDOW_H 

29. चलिए हमारे पास QML का एक बटन है जो C ++ फ़ंक्शन को एक मनमाना नाम के तहत बुलाएगा। इसे सार्वजनिक खंड में वर्ग में mainwindow.h में घोषित करें:

 Q_INVOKABLE void FunctionC();// C++   QML 

नतीजतन, हम प्राप्त करते हैं:

 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QtDeclarative/QDeclarativeView> #include <QGraphicsObject> #include <QtGui> #include <QDeclarativeContext> namespace Ui { class MainWindow; } class MainWindow : public QMainWindow { Q_OBJECT public: explicit MainWindow(QWidget *parent = 0); ~MainWindow(); Q_INVOKABLE void FunctionC();// C++   QML private: QDeclarativeView *ui; QObject *Root;//  QML  }; #endif // MAINWINDOW_H 

Q_INVOKABLE कीवर्ड पर ध्यान दें । यह वह है जो QML के लिए फ़ंक्शन को दृश्यमान बनाता है।

30. अब हम मेनवॉन्डव में अपने फंक्शन का वर्णन करेंगे ।

 void MainWindow::FunctionC() { //   QObject* textinput = Root->findChild<QObject*>("textinput"); //   QObject* memo = Root->findChild<QObject*>("memo"); QString str;//    //       text str=(textinput->property("text")).toString(); int a; a=str.toInt();//    a++;//   1 QString str2;//     str2=QString::number(a);//    //         memo->setProperty("text", str+"+1="+str2); } 

31. खैर, आखिरकार, हम अपने फ़ंक्शन को हमारे QML बटन के हैंडलर में main.qml फ़ाइल में जोड़ते हैं। माउस एक्शन हैंडलर अब इस तरह दिखता है:

 //  MouseArea { anchors.fill: parent id: mouseArea } 

अब यह इस तरह बन जाएगा:

  //  MouseArea { anchors.fill: parent id: mouseArea //    window.FunctionC() onClicked: window.FunctionC() } 

नतीजतन, हम प्राप्त करते हैं:

 import QtQuick 1.0 Rectangle { width: 300 height: 300 anchors.fill: parent // Rectangle { id: button //  //   x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2; //  width: 100 height: 30 //  color: "gray" //  Text { id: buttonLabel text: "" anchors.centerIn: parent; } //  MouseArea { anchors.fill: parent id: mouseArea //    window.FunctionC() onClicked: window.FunctionC() } } //  Rectangle { id: textinputRect //   //  x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2+40; //   width: 100 height: 18 //   color: "gray" TextInput { id: textinput objectName: "textinput" color: "#151515"; selectionColor: "blue" font.pixelSize: 12; width: parent.width-4 anchors.centerIn: parent focus: true text:"1" } } //  Rectangle { id: memoRect //   //  x: parent.width / 2 - button.width / 2; y: parent.height / 2 - button.height / 2+70; //   width: 100 height: 35 //   color: "gray" TextEdit{ id: memo objectName: "memo" wrapMode: TextEdit.Wrap width:parent.width; readOnly:true } } } 

ध्यान दें कि फ़ंक्शन विंडो के माध्यम से कहा जाता है ।

वह सब है! अब प्रोग्राम को रन करें और बटन पर क्लिक करें। अगर आपने सब कुछ सही किया और मैंने कोई गलती नहीं की, तो आप देखेंगे:



स्रोत से लिंक करें: डाउनलोड करें
निष्पादन योग्य फ़ाइल से लिंक करें: डाउनलोड करें ।