こんにちは、％ユーザー名％！
少しの背景：
少し前に、友人を実験室にしました。そのテーマはハミングコードです。 プログラムは、最小限のコントロールセットを備えた通常のQtアプリケーションでした。 配達は成功し、しばらく経ちましたが、今では彼の友人も同じトピックについて研究室を通過する必要があります。 もちろん、同じプログラムを受講することはできません。 これは疑問を投げかけます-前のものとは異なり、3つのボタンと2つのテキストボックスを持つプログラムを作成する方法は？ Qt Quickを使用してインターフェイスを書き直し、プログラムのロジックと計算をC ++のままにして、同時に興味のある人に私がそのようなことをどのように行うかを伝えることが起こりました。 Qt Quickに関する文献、特にロシア語の文献はあまりないので、この記事が有用で興味深いものになることを本当に期待しています。 私は明確にします-主な注意は、Qt QuickとC ++の相互作用の方法に、少なくともQtとQMLの基本には注意が払われますが、ハミングコードの計算には注意されません。
ワイヤーフレーム
それで、私の仕事でQt Sdkをインストールする最後の数秒が始まります。
QtCreatorを開き、「GUI Qtアプリケーション」タイプの新しいプロジェクトを作成します。 ディレクトリ、名前を選択し、このウィザードウィンドウで次の操作を行います。
「フォームの作成」チェックボックスを削除します。 必要ありません。インターフェイス全体をペンで記述します。
生成されたmainwindow.hファイルに、次のヘッダーファイルを含めます。
#include #include <QtDeclarative / QDeclarativeContext>
#include <QtDeclarative / QDeclarativeView>
MainWindowクラスのコンストラクターで、次の変更を行います。
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
QDeclarativeView* dv = new QDeclarativeView();
dv->setSource(QUrl("qrc:/main.qml"));
QDeclarativeContext* cntx = dv->rootContext();
cntx->setContextProperty("window",this);
dv->setResizeMode(QDeclarativeView::SizeRootObjectToView);
setCentralWidget(dv);
}
少し説明しましょう-QDeclarativeView型のウィジェットを作成します-これはQMLを表示できる要素です。 次に、ルートQML要素の名前-main.qmlを設定します。これは、後で追加するリソースから取得されます。 次に、ウィジェットコンテキストを取得して、新しい「ウィンドウ」プロパティを追加します。 これで、QMLからwindowというオブジェクトにアクセスできるようになります-これがフォームです。 なぜこれが必要なのかは、後ほど明らかになります。 サイズ変更モードは以下に設定されています-ルートQML要素はウィンドウに合わせてサイズ変更され、その逆はありません。 setCentralWidgetメソッドは、QMainWindowの中央ウィジェットを設定します。 Qtに出くわした人は誰もが間違いなくそれをよく知っています。
このプロジェクトには、上記のQMLファイルが必要です。 追加してください：
次に、同様にリソースファイルを追加します。
自動的に開き、下部にある[追加]-> [プレフィックスの追加]をクリックすると、[/ new / prefix1]が表示されます。 簡単にするため、「/」のみを消去して残します。 ここにmain.qmlファイルを追加します（「追加」->「ファイルの追加」）。 別の小さなこと-* .proファイルに1つの変更を加える必要があります
QT + =コア宣言
この簡単な方法で、プロジェクトを公開してQtDeclarative4ライブラリに依存します
これで、プロジェクトを安全に開始して確認できます...白い四角は100 x 62です:)しかし、外観は欺かれています-実際、白い四角よりもはるかに多く、これはQMLでインターフェイスが記述され、C ++でロジックが記述されたアプリケーションです
このような何かが、Qt QuickとC ++のハイブリッドになるアプリケーションの作成を開始します。 主なポイントは、QDeclarativeViewウィジェットのルートコンテキストを取得し、C ++オブジェクトにアクセスするための新しいプロパティを追加することです。 このプロパティは、QMLとC ++の間の一種の橋渡しになります。
インターフェイスとロジックを作成する
そのため、基礎を作成する段階、つまり作業のロジックが渡されます。
mainwindow.hファイルで、クラスの説明に追加します
public slots:
QString slotEncode(QString sIn);
QString slotDecode(QString sIn);
bool slotCheck(int val);
名前から、最初の2つのスロットがエンコードとデコードを処理することは明らかです。 どちらも、ユーザーがQMLで入力した入力文字列を受け入れ、エンコードされたバージョンまたはデコードされたバージョンをそれぞれ返します。 なぜ通常の関数の代わりにスロットがあるのですか？ setContextProperty（）を使用して可視化されたオブジェクトにアクセスすることでQMLから呼び出すことができるのはQ_INVOKABLEマクロ（詳細についてはドキュメントを参照）を使用して宣言された関数と同様にスロットであるためです。 簡単に言えば、QMLでwindow.slotEncode（）を書くことができます:)また、Q_PROPERTYマクロを使用して宣言されたすべてのプロパティは、QMLコードからアクセスできます。名前で直接アクセスできます。
これらのスロットの実装は古いプロジェクトから取りますが、ここでは完全には取り上げません。アーカイブは以下のリンクからダウンロードできます。 また、小さな警告があります-エンコードとデコードの過程で、私はまったく書き換えたくないテーブルが構築されます。そのため、元の形式のままで、別のウィンドウに表示されます。 slotCheck（int v）スロットも公式目的で追加されました。これはコード計算のプロセスでのみ使用されます。もちろん、追加する必要がありますが、レッスンに属さない理由はまったく考えません！
今ではプログラムインターフェースを作成するだけです:)
多分、私は世界の創造的な見方のない普通のプログラマーによって約15分で行われるインターフェースのバージョンを提供するでしょう（ただし、私のガールフレンド、アーティストは通常私がそのようなことをするのに役立ちます）。
import QtQuick 1.0
Rectangle {
width: 365
height: 200
gradient: Gradient {
GradientStop {
position: 0
color: "#696363"
}
GradientStop {
position: 1
color: "#000000"
}
}
Text {
id: text1
x: 37
y: 27
color: "#fbfbfb"
text: " "
style: Text.Raised
font.pixelSize: 12
}
Text {
id: text2
x: 198
y: 27
color: "#ffffff"
text: " "
style: Text.Raised
font.pixelSize: 12
}
// .
Rectangle {
color: "#4de013"
radius: 6
border.width: 5
border.color: "#f5f9f4"
x: 36
y: 66
width: 133
height: 20
TextInput {
id: text_input1
width: parent.width - 20
height: parent.height - 5
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: ""
font.pixelSize: 12
}
}
// .
Rectangle {
color: "#48c819"
radius: 6
border.width: 5
border.color: "#f5f9f4"
width: 133
height: 20
x: 201
y: 66
TextInput {
id: text_input2
width: parent.width - 20
height: parent.height - 5
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: ""
font.pixelSize: 12
}
}
// .
Rectangle {
id: bEncode
property alias text: label.text
width: 135
height: 60
radius: 20
border.width: 2
border.color: "#090606"
gradient: Gradient {
GradientStop {
id: gradientstop1
position: 0.01
color: "#ffffff"
}
GradientStop {
id: gradientstop2
position: 0.28
color: "#867d7d"
}
GradientStop {
id: gradientstop3
position: 1
color: "#000000"
}
}
signal clicked()
x: 36
y: 110
Text {
id: label
color: "#ffffff"
text: ""
font.strikeout: false
font.pointSize: 10
horizontalAlignment: Text.AlignHCenter
anchors.centerIn: parent
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
text_input2.text = window.slotEncode(text_input1.text)
}
onEntered: {
bEncode.state = "green"
}
onExited: {
bEncode.state = "gray"
}
}
states: [
State {
name: "gray"
},
State {
name: "green"
PropertyChanges {
target: gradientstop1
color: "#ffffff"
}
PropertyChanges {
target: gradientstop2
color: "#34c22a"
}
PropertyChanges {
target: gradientstop3
color: "#000000"
}
}
]
}
// .
Rectangle {
id: bDecode
property alias text: label.text
width: 136
height: 60
radius: 20
border.width: 2
border.color: "#090606"
gradient: Gradient {
GradientStop {
id: gradientstop21
position: 0.01
color: "#ffffff"
}
GradientStop {
id: gradientstop22
position: 0.28
color: "#867d7d"
}
GradientStop {
id: gradientstop23
position: 1
color: "#000000"
}
}
signal clicked()
x: 200
y: 110
Text {
id: label2
text: ""
color: "#ffffff"
font.strikeout: false
font.pointSize: 10
horizontalAlignment: Text.AlignHCenter
anchors.centerIn: parent
}
MouseArea {
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onClicked: {
text_input1.text = window.slotDecode(text_input2.text)
}
onEntered: {
bDecode.state = "green"
}
onExited: {
bDecode.state = "gray"
}
}
states: [
State {
name: "gray"
},
State {
name: "green"
PropertyChanges {
target: gradientstop21
color: "#ffffff"
}
PropertyChanges {
target: gradientstop22
color: "#34c22a"
}
PropertyChanges {
target: gradientstop23
color: "#000000"
}
}
]
}
}
構文が正しく強調表示されるかどうかはまったくわかりません。JavaScriptとの類似性がプラスの役割を果たすことを期待しましょう。
ソースへのリンク-Tyk！
仕事の結果：
簡単な要約
私たちの仕事の結果は、ハイブリッドアプリケーションでした。 将来的には、このようなアプリケーションの作成により、非標準のQtQuickインターフェイスと高性能C ++コードを組み合わせることができます。 「Qt Quickに関する文献を提供する」という質問が一般的になってきているため、この記事がこれらの技術に興味のある方に役立つことを願っています。 ご清聴ありがとうございました！