Geekly Articles each Day

QMLおよびC ++。 束の簡単な例

画像
QMLテクノロジーは美しく、目に優しいものです。 彼女は私にとても興味があり、私はそれをマスターすることにしました。 しかし、私は愚かで無力だったので、ここにはありませんでした。 ネットワーク上のどこにも「ダミー用」の例は見つかりませんでした（おそらく検索は不十分でした）。簡単なQMLおよびC ++アプリケーションをゼロから作成しました。 どこかで何かが欠けていました。QtCreatorが考慮されなかったか、コードがエラーをスローしたか、ユーザーが自分自身を知っているべき瞬間がありませんでした。 ここのハブに関する公式ドキュメントと例にも、これらの欠点がありました。 だから私は、詳細な説明を含む初心者向けの記事を書くための長い試みと間違いの後、決めました。

チャレンジ 。 C ++と組み合わせてQMLプログラムを作成する必要があります。
1.フォームには、ボタン、入力行、および出力フィールドがあります。
2.入力行から数値を読み取る必要があり、1が追加され、出力フィールドに回答が表示されます。
3.インターフェイスはQMLで記述されています。
4. C ++で機能します。つまり、QMLとC ++の関係を確認する必要があります。QMLボタンはC ++関数を呼び出し、関数はQMLオブジェクトのプロパティを変更します。


基本的なQMLアプリケーションの作成


Qt Creatorを使用します。 Qt 4.7.4でバージョン2.3を使用しました
画像
QMLアプリケーションの作成

1. GUIアプリケーションを作成します。 ファイル->新規ファイルまたはプロジェクト.... 左側で、 Qt Widget Projectを選択し、右側にQt GUIアプリケーションを選択します。 次に、下のボタン「 選択... 」をクリックします。


2.次のウィンドウで、プロジェクトの名前を選択します（スペースとロシア語の文字なし）。 たとえば、この例では「 例 」です。


3.次のウィンドウで、「 デスクトップ 」の横にチェックマークが付いているはずです。 お持ちでない場合は、Qt Creatorを誤ってインストールしています（または、デスクトップアプリケーションを意図的に作成したくない）。 私がインストールしたQt Creator公式アセンブリ（2.3）は、何らかの理由でデフォルトではデスクトップパーツをインストールしませんでした。


4.次のウィンドウで、「 フォームの作成 」のチェックを外し ます 。


5.次のウィンドウでは、何も変更できません。 そして、「 完了 」ボタンをクリックします。


プロジェクトファイルの編集


6.プロジェクトファイルを編集します（このExample.proがあります ）。


そして、「 QT + = core gui 」という行に「 declarative 」という単語を追加します。 その結果、次の行が得られます。

QT += core gui declarative


QMLプロジェクトの作成

7. Qt Creatorでプロジェクトのあるフォルダーを右クリックし、アイテム「 新規追加... 」に移動します 。


8.左側の「 QML 」と右側の「 QML File 」を選択します。


9.それを「 メイン 」と呼びます。


10.次のウィンドウは変更されていません。


11.その結果、次のテキストを含むファイル「main.qml」を取得します。

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


リソースファイルを作成する

12. Qt Creatorでプロジェクトのあるフォルダーを右クリックし、アイテム「 新規追加... 」に移動します 。



13.左側で「 Qt 」を選択し、右側で「 Qt Resource File 」を選択します。


14. resと呼びましょう。


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>などを追加し、 名前空間を追加し、 明示的なキーワードを追加し、最も重要なこととしてQDeclarativeView * 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.アプリケーションを実行して、白いウィンドウを取得します。 私たちのQMLが獲得しました。


アプリケーション作成


これで、問題を解決するアプリケーションの直接作成に進むことができます。

インターフェイスを構築します。

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.ユーザーがtextinputという名前の情報を入力する入力行を追加します。

 //  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.プログラムがmemoという名前の回答を出力する出力フィールドを追加します。

  //  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 ++コードの関係を確立しましょう。 これを行うには、 mainwindow.cppファイル、つまりMainWindow関数を編集して、 次の行を追加します。

  //   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.追加されたコードには、宣言されていない変数Rootがあります。 その後、他のすべての子要素を検索します。 privateセクションのクラスの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から任意の名前FunctionCでC ++関数を呼び出すボタンを用意します。 publicセクションのクラスの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. mainwindow.cppで関数を説明します。

 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.最後に、 main.qmlファイルの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 } } }


関数はwindowを介して呼び出されることに注意してください。

以上です！ ここでプログラムを実行し、ボタンをクリックします。 あなたがすべてを正しくし、私が間違いを犯さなかった場合、あなたは見るでしょう：

ヌル

ソースへのリンク： ダウンロード
実行可能ファイルへのリンク： ダウンロード 。

Source: https://habr.com/ru/post/J138837/

More articles:


All Articles