Qt 5.3：モバイルクロスプラットフォームのロースタート

main.qmlファイルを開きます。 タイトル、メニューバー、テキストを削除します。 その結果、次のことができるようになります。

import QtQuick 2.2 import QtQuick.Controls 1.1 ApplicationWindow { visible: true width: 640 height: 480 } 

ApplicationWindowは、子が追加されるルート要素です。 メインQMLファイルに存在する必要があります。 ApplicationWindow内にidとobjectNameの2つのフィールドをすぐに書き込みます。

 ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 } 

idはQMLファイル内のApplicationWindowにアクセスするために使用されます。objectNameはC ++コードでQMLからメインウィンドウを見つけるために必要です。

固定値の幅と高さのパラメーターは今のところ混同しないでください。 インターフェースは、最初にそのような寸法でのみ作成され、その後スマートフォンの画面サイズまで拡大されます。 このため、Androidでは、アプリケーションの起動時に画面がわずかにぎくしゃくしており、修正方法があります。最後に説明します。

一般的に、構文ベースのQMLファイルは、Webレイアウトとjavascript-logicの揮発性の混合を連想させますが、類似性は部分的です。 QMLでは、インターフェイスだけでなく、ロジック（たとえば、フォームの完了を確認するのに便利）も作成できますが、これはプラスです。

ウィンドウの色を指定しましょうこれを行うには、ApplicationWindowの「height：480」行のすぐ下に行を追加します

 color: "#F0F0FF" 

16進コードで色を設定できます。一部の色は、たとえば「赤」、「透明」などの名前で指定できます。 作成した定数を使用することもできます。詳細については、後で説明します。 次に、インポートに追加します。

 import QtQuick.Controls.Styles 1.2 

コントロールをカスタマイズするにはスタイルが必要になります。 ApplicationWindow内にボタンを作成します。 一般的なコード：

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height } } 

ボタンの幅は、メインウィンドウの幅、高さ-メイン画面の高さを基準にして計算されます。 ここでは、ボタンのサイズと位置を計算するためのid、基本式によって要素にアクセスする例を示します[参照 サプリメント1] 。 式のパラメーター（yによって計算される高さ）の前にidを指定しない場合、内部にある現在の要素のパラメーターが使用されていると見なされます。 すべてを保存して実行します。


ボタンが表示され、そのサイズは開いているウィンドウ（デスクトップ）またはモバイルデバイスの画面のサイズに対して計算されます。これにより、さまざまなデバイス（UIを作成するためにカスタムクラスを使用しない場合のAndroidのusually核と同じ）の同じ表示の問題を解決できます。

新しいボタンのスタイルを作成しましょう！ これを行うには、Button内に以下を追加します。

 style: ButtonStyle { } 

ボタンのスタイルは、背景とラベルの2つの部分で構成されます。 これらの部分を別のQMLファイルに作成して、メインの部分が乱雑にならないようにします。 これを行うには、Qt Creatorを折りたたんでプロジェクトフォルダーに移動し、そこに「QML」フォルダーを作成して、作業ファイルが整然と配置されるようにします。

Qt Creatorに戻ります。 ツリー（プロジェクト）でプロジェクト名を右クリックし、コンテキストメニューで[新規追加...]を選択します。 次に、Qt、「QMLファイル（Qt Quick 2）」を選択します。


名前は「ButtonBackground」、パスは新しく作成された「QML」フォルダーへのパスです。


プレフィックスを確認します。バージョン管理は必要ないため、[完了]をクリックします。


同様に、「ButtonLabel.qml」ファイルを作成します。 プロジェクトは次のようになりました。


「QML / ButtonBackground.qml」をダブルクリックして開きます。 次のように編集します。

 import QtQuick 2.2 Rectangle { anchors.fill: parent anchors.margins: 4 border.width: 2 border.color: "#FFFFFF" radius: height / 4 gradient: Gradient { GradientStop { position: 0; color: control.pressed ? "#00AAAA" : "#AAFFFF" } GradientStop { position: 1; color: "#00CCCC" } } // color: "#00AAAA" // opacity: 0.25 } 

順番に：
-anchors.fill：parent-ボタンの背景が完全に塗りつぶされるようにするparent-現在の要素が配置されている親要素へのアクセス。
-anchors.margins：4-すべての側面から小さなインデントを設定します。
-ボーダー-ストローク設定[参照 サプリメント8] ;
-半径：高さ/ 4-ここではすでに興味深いです。 この場合、角を丸くするために使用されます（値はボタンの高さに対して広がります）が、Rectangleの幅と高さを同じに設定すると、十分に大きい半径値を使用してRectangleから円を取得できます。
-勾配は2点で構成されます。 最初のポイント（ゼロ位置）に注意してください-ここでは、ボタンの状態（control.pressed）に切り替えて、押されたボタンに応じて色を決定します。単純な条件演算子を使用します。 真実の場合のアクション：falseの場合のアクション。
-グラデーションの代わりに色を設定できます。たとえば、透明度（不透明度：0〜1）を使用することもできます。

「ButtonBackground.qml」を保存し、「main.qml」に戻ります。 作成したQMLフォルダーをインポートに追加します。

 import "QMLs" 

これで、このフォルダー内のすべてのQMLファイルにアクセスできます。 ボタンスタイルに戻り、作成したばかりの背景を指定します。 結果は次のようになります。

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} } } } 

すべてを保存して実行します。


ボタンは少し明るくなりましたが、署名がありません。 修正してください。 「ButtonLabel.qml」を開き、次のように編集します。

 import QtQuick 2.2 Text { anchors.fill: parent horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter font.bold: true font.pixelSize: (mainWindow.width>mainWindow.height) ? parent.height/1.75 : parent.height / 2.5 color: "#005050" // text: "" } 

署名はボタン本体を完全に埋め、中央に配置され、大胆な顔をしています。 署名のサイズは、現在の画面の向きを基準にして計算されます。幅が大きいほど横向きになり、高さ-縦向きになるのは論理的です[参照 補足2] 。 ここではボタンテキストをインストールしません。これは不便です。

再び「main.qml」を開きます。 作成したばかりの「ButtonLabel」をラベルスタイルに追加します。ここでは、ボタンテキストをすぐに示します[参照 サプリメント3] 。 次のようになります。

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } } } 

すべてを保存して実行します。


クリック可能なボタンがあるので、クリックハンドラーを追加して、ログにメッセージを出力します。 これを行うには、ボタン内に行を追加します。

 onClicked: console.log("Button '' clicked") 

合計で：

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } onClicked: console.log("Button '' clicked") } } 

実行して確認してください。 「アプリケーション出力」パネル（Qt Creatorウィンドウの一番下）のボタンをクリックすると、新しい行が表示されます：「qml：Button 'Test' clicked」：


これで、今のところボタンで作業を終了します。

「main.qml」を開きます。 「ボタン」の下に追加：

 TextField { id: textField width: parent.width height: parent.height / 10 horizontalAlignment: Text.AlignHCenter placeholderText: " " validator: RegExpValidator { regExp: /[--a-zA-Z]{16}/ } style: TextFieldStyle { background: Rectangle {color: "white"} textColor: "#00AAAA" placeholderTextColor: "#00EEEE" font: font.capitalization = Font.Capitalize, font.bold = true, font.pixelSize = mainWindow.height / 25 } Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return) { Qt.inputMethod.hide() event.accepted = true } } } 

サイズを設定します。フィールドからテキストを読み取るにはidが必要です。 中央に配置を配置し、プレースホルダーを指定します。

また、この入力に単純な正規表現を追加します（いずれの場合も「a」から「i」、および「a」から「z」の文字、合計16文字以内）。

スタイルは別のファイルに移動されません。 背景（背景）に白い長方形を置き、入力テキストとプレースホルダーの色を設定します。 フォントでは、単語を大文字（font.capitalization = Font.Capitalize）、太字、およびフォントサイズで構成します（ここでは親要素にアクセスできないため、画面の高さに対するサイズを計算します）。

「TextField」の場合、inputMethodHints：フィールドに値を追加することもできます（Qt.ImhPreferNumbersなど）。 値に応じて、入力用のさまざまなキーボードが表示されます（Qt.ImhPreferNumbersの場合、数字を入力するためのキーボードが表示されます[付録6を参照] ）。 この場合、このフィールドは追加しません。 また、echoModeなどの他の便利なパラメーターもあります（パスワードを入力するには、TextInput.Passwordに設定できます）。

別に、Keys.onPressed内の式について言及する必要があります。 ここでは、完了ボタンのクリックを追跡して、クリックしたときにAndroidデバイスのキーボードを閉じるようにします。 したがって、「main.qml」は最終的に次のようになります。

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } onClicked: console.log("Button '' clicked") } TextField { id: textField width: parent.width height: parent.height / 10 horizontalAlignment: Text.AlignHCenter placeholderText: " " validator: RegExpValidator { regExp: /[--a-zA-Z]{16}/ } style: TextFieldStyle { background: Rectangle {color: "white"} textColor: "#00AAAA" placeholderTextColor: "#00EEEE" font: font.capitalization = Font.Capitalize, font.bold = true, font.pixelSize = mainWindow.height / 25 } Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return) { Qt.inputMethod.hide() event.accepted = true } } } } 

AndroidタブレットとiPhoneシミュレーターでは、現在のアプリケーションは次のようになります。




論理的な結論を達成するために、ボタンがクリックされたときに私たちの名前の挨拶が表示される署名を追加しましょう。 「main.qml」の「TextField」の後に追加します。

 Text { id: text y: textField.height width: parent.width height: parent.height / 10 font.pixelSize: height / 2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } 

署名は、テキスト入力フィールド（y：textField.height）のすぐ下に配置されます。このため、ワードラップも設定します。 繰り返しますが、便宜上「テキスト」全体を別のQMLファイルに移動できますが、この場合はこれを行いません。

ボタンを押すためのロジックを規定することは残っています。 ボタンのonClickedフィールドに目的のアクションをすべて記述できますが、今回はこのための関数を作成しましょう。 これは、ボタンに追加された関数を使用した場合の「main.qml」の外観です。

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { function hello() { if (textField.text != "") { text.text = ", <b>" + textField.text.toUpperCase() + "</b>!" } } width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } onClicked: hello() } TextField { id: textField width: parent.width height: parent.height / 10 horizontalAlignment: Text.AlignHCenter placeholderText: " " validator: RegExpValidator { regExp: /[--a-zA-Z]{16}/ } style: TextFieldStyle { background: Rectangle {color: "white"} textColor: "#00AAAA" placeholderTextColor: "#00EEEE" font: font.capitalization = Font.Capitalize, font.bold = true, font.pixelSize = mainWindow.height / 25 } Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return) { Qt.inputMethod.hide() event.accepted = true } } } Text { id: text y: textField.height width: parent.width height: parent.height / 10 font.pixelSize: height / 2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } } 

ご覧のとおり、テキストをフォーマットすることができます（この場合はタグを使用）。保存、実行、および確認します。

この例では、2つのリストを一度に作成して、ListViewの機能をさらに表示します。 「テキスト」の下の「main.qml」に追加します。

 ListView { id: lvList objectName: "lvList" y: text.y + text.height width: parent.width height: parent.height * 0.3 clip: true spacing: 8 model: ListModel { ListElement { name: " 0" } ListElement { name: " 1" } ListElement { name: " 2" } } delegate: Rectangle { width: lvList.width height: lvList.height / 3 color: "#00AAAA" Text { text: name } MouseArea { anchors.fill: parent onClicked: console.log("ListView el#" + index + " clicked!") } } } 

ListViewの識別子とサイズを設定します。 ListView自体は透明なので、そのための基盤を作成しません。

クリップパラメータはtrueに設定されています。これは、 それ以外の場合、リストをスクロールすると、リストに表示されるようになる要素がListViewからクロールされます。

間隔パラメーターは、リスト項目間のインデントを設定します。

さらに、モデルは基本的にデータモデルです。 複数のListElementを含むListModelが入力されます。 「ListElement」は実際にはリストの要素であり、内部に目的の名前と値のペアを登録できます。この場合、ペアは1つだけです。

デリゲートパラメーターは、リスト内の各アイテムの外観を決定します。 テキストが入った長方形ができます。 テキストパラメーターの値については、モデルに以前に登録された名前パラメーターを示します。

「MouseArea」は、マウスクリックを追跡したり、画面に触れたりできる領域です。 デリゲートのサイズを入力します。 を押すと、ログに要素のインデックスが表示されます。 MouseAreaには便利なonPressedフィールドもあります。
そしてonReleased。

一般に、QMLで規定されているモデルは将来必要ありません。 バックエンドが充填を行います。 ただし、このようなスタブを作成してリストの外観をカスタマイズすると便利です。 また、デリゲートのデザインを別のQMLファイルで作成することも便利です。 また、ListViewにはさまざまなパラメーターがあり、微調整を試みることができることも追加します。 しかし、ここでは他に何も複雑にしません。 何が起こったのか見てみましょう。 保存して実行：


リスト項目をクリックしてログを確認してみましょう。「qml：ListView el＃0 clicked！」のような行が表示されます。

2番目のリストに移動します。 最初のリストの下に追加します。

 ListView { id: lvPager y: lvList.y + lvList.height width: parent.width height: parent.height * 0.2 clip: true model: ListModel { ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Moscow" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=London" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Rio" } } delegate: Image { width: lvPager.width height: lvPager.height source: map_url fillMode: Image.PreserveAspectFit } orientation: ListView.Horizontal snapMode: ListView.SnapOneItem } 

モデルとして、リクエストに応じて返される画像をマップするためにリンクを使用します。 デリゲートはイメージ自体であり、そのソース（ソース）はモデルで指定されたリンクになります。 ローカルファイルをソースとして指定することもできます。 これを行うには、次のものが必要です。
-プロジェクトフォルダーに画像を追加します。
-Qt Creatorのプロジェクトツリーで、「qml.qrc」を右クリックし、「エディターで開く」を選択します。
-ウィンドウの「追加」->「ファイルの追加」->追加した画像を選択します。
-QMLファイルの「イメージ」で、ソースとしてイメージへのパスを次のように示します：「qrc：/ full_file_name」。

「画像」の場合、縦横比を維持しながら画像自体が目的の幅/高さの寸法に調整されるように、fillModeも設定します。

方向パラメーター（水平方向に設定）とsnapMode：ListView.SnapOneItemを一緒に使用すると、ListViewがAndroidのViewPagerのようになるという効果を実現できます。

ほぼ完了。 プロジェクトツリーで、ファイル「Sample.pro」を開き、「ネットワーク」を「QT + = qml quick widgets」行に追加します。そうしないと、ネットワーク接続が機能しません。


念のため、すべての「main.qml」コードのリストを投稿しています。

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { function hello() { if (textField.text != "") { text.text = ", <b>" + textField.text.toUpperCase() + "</b>!" } } width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } onClicked: hello() } TextField { id: textField width: parent.width height: parent.height / 10 horizontalAlignment: Text.AlignHCenter placeholderText: " " validator: RegExpValidator { regExp: /[--a-zA-Z]{16}/ } style: TextFieldStyle { background: Rectangle {color: "white"} textColor: "#00AAAA" placeholderTextColor: "#00EEEE" font: font.capitalization = Font.Capitalize, font.bold = true, font.pixelSize = mainWindow.height / 25 } Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return) { Qt.inputMethod.hide() event.accepted = true } } } Text { id: text y: textField.height width: parent.width height: parent.height / 10 font.pixelSize: height / 2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } ListView { id: lvList objectName: "lvList" y: text.y + text.height width: parent.width height: parent.height * 0.3 clip: true spacing: 8 model: ListModel { ListElement { name: " 0" } ListElement { name: " 1" } ListElement { name: " 2" } } delegate: Rectangle { width: lvList.width height: lvList.height / 3 color: "#00AAAA" Text { text: name } MouseArea { anchors.fill: parent onClicked: console.log("ListView el#" + index + " clicked!") } } } ListView { id: lvPager y: lvList.y + lvList.height width: parent.width height: parent.height * 0.2 clip: true model: ListModel { ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Moscow" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=London" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Rio" } } delegate: Image { width: lvPager.width height: lvPager.height source: map_url fillMode: Image.PreserveAspectFit } orientation: ListView.Horizontal snapMode: ListView.SnapOneItem } } 

実行して何が起こったかを確認できます。


私の意見では、QMLでListViewを操作するのは非常に簡単で便利であり、カスタマイズの可能性はたくさんあります。 ListViewを使用すると、たとえば、スピナー（ポップアップリスト）を実装して、リストの可視性（フィールドの表示）を操作することもできます。

重要な注意：何らかの理由で、Habrは "map_url"の¢erをセント記号に置き換えます。 リクエストリンクでは、＆center = ...をスペースなしでのみ使用する必要があります。

「ローダー」は、QMLでマルチウィンドウを実装できるようにするエンティティです。 中核となる「ローダー」は、QMLファイルをソースとして持つ単なるコンテナです（理論的には、このファイルを外部サーバーのどこかに配置することもできます）。 ここで非常に重要です。QMLまたはC ++コードからLoader内の要素にアクセスする場合、この要素を含むコンテナを現時点でLoaderにロードする必要があります。そうしないと、アプリケーションがクラッシュします。 現時点では存在しない要素を参照することはできず、Qtにそのプロパティの一部を変更するように依頼することはできません。 問題を解決するには、特定のコンテナのアクティビティに関するブール値フラグを保存するか、危険な時間（たとえば、サーバーへの接続の進行中）にローダーのコンテンツの切り替えを禁止します（ナビゲーションボタンで有効：falseを設定できます）。

したがって、プロジェクトのQMLフォルダーに2つのQMLファイルを作成します。 それらを「Loader1.qml」および「Loader2.qml」と呼びましょう。 「Loader1.qml」：

 import QtQuick 2.2 Rectangle { anchors.fill: parent color: "green" opacity: 0.2 } 

ただの緑色の長方形。 今「Loader2.qml」：

 import QtQuick 2.2 Rectangle { id: rect anchors.fill: parent focus: true color: "blue" opacity: 0.2 SequentialAnimation { running: true loops: SequentialAnimation.Infinite PropertyAnimation { target: rect; property: "opacity"; to: 0; duration: 500 } PropertyAnimation { target: rect; property: "opacity"; to: 0.2; duration: 500 } } Keys.onPressed: { if (event.key == Qt.Key_Back || event.key == Qt.Key_Escape) { loader.source = "qrc:/QMLs/Loader1.qml" event.accepted = true } } } 

focus：trueを指定してください。 そうでない場合、Keys.onPressedセクションは起動しません。

SequentialAnimationは、一連のアニメーションです。 running：trueパラメーターを指定して、アニメーションがすぐに機能するように、ループ（繰り返しの数）を無限に設定します。

内部では、SequentialAnimationには2つのPropertyAnimationsがあります。 特定の時間（期間）の間、ターゲット要素（ターゲット）のパラメーター（プロパティ）を目的の値（に）に変更できます。

アニメーションが停止した後（running：falseに設定した場合）、変更されたすべてのターゲットパラメータを元のパラメータに手動で戻す必要があることに注意してください。

「main.qml」内にローダー自体を作成します。

 Loader { id: loader y: lvPager.y + lvPager.height width: parent.width height: parent.height * 0.2 focus: true source: "qrc:/QMLs/Loader1.qml" } 

内部要素（ソース）がボタンのクリックを監視するように、必ずfocus：trueを指定してください。

: . , Keys.onPressed :

 Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return || event.key == Qt.Key_Back) { Qt.inputMethod.hide() loader.forceActiveFocus() event.accepted = true } } 

«main.qml», :

 Button { width: mainWindow.width / 4.5 height: mainWindow.height / 10 x: mainWindow.width / 2 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "Loader" } } onClicked: loader.setSource("qrc:/QMLs/Loader2.qml") } 

«main.qml»:

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { function hello() { if (textField.text != "") { text.text = ", <b>" + textField.text.toUpperCase() + "</b>!" } } width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } onClicked: hello() } TextField { id: textField width: parent.width height: parent.height / 10 horizontalAlignment: Text.AlignHCenter placeholderText: " " validator: RegExpValidator { regExp: /[--a-zA-Z]{16}/ } style: TextFieldStyle { background: Rectangle {color: "white"} textColor: "#00AAAA" placeholderTextColor: "#00EEEE" font: font.capitalization = Font.Capitalize, font.bold = true, font.pixelSize = mainWindow.height / 25 } Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return || event.key == Qt.Key_Back) { Qt.inputMethod.hide() loader.forceActiveFocus() event.accepted = true } } } Text { id: text y: textField.height width: parent.width height: parent.height / 10 font.pixelSize: height / 2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } ListView { id: lvList objectName: "lvList" y: text.y + text.height width: parent.width height: parent.height * 0.3 clip: true spacing: 8 model: ListModel { ListElement { name: " 0" } ListElement { name: " 1" } ListElement { name: " 2" } } delegate: Rectangle { width: lvList.width height: lvList.height / 3 color: "#00AAAA" Text { text: name } MouseArea { anchors.fill: parent onClicked: console.log("ListView el#" + index + " clicked!") } } } ListView { id: lvPager y: lvList.y + lvList.height width: parent.width height: parent.height * 0.2 clip: true model: ListModel { ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Moscow" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=London" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Rio" } } delegate: Image { width: lvPager.width height: lvPager.height source: map_url fillMode: Image.PreserveAspectFit } orientation: ListView.Horizontal snapMode: ListView.SnapOneItem } Loader { id: loader y: lvPager.y + lvPager.height width: parent.width height: parent.height * 0.2 focus: true source: "qrc:/QMLs/Loader1.qml" } Button { width: mainWindow.width / 4.5 height: mainWindow.height / 10 x: mainWindow.width / 2 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "Loader" } } onClicked: loader.setSource("qrc:/QMLs/Loader2.qml") } } 

url (& center) , . , :




«Loader» . Android- «Back», .

UI QML C++ .