チュートリアル：Qt Quick アプリケーション
Edit モードでQt Quick アプリケーションを作成する方法。
このチュートリアルでは Qt Quick.UI の選択肢の詳細については、ユーザーインターフェースを参照してください。
このチュートリアルでは、Qt の最小バージョンとして Qt 6 を使用し、ビルドシステムとして CMake を使用する場合に、Qt Creator を使用してステートと トランジションを実装する方法を説明します。
このチュートリアルでは、編集モードを使って、3 つの矩形を選択するとその間を Qt ロゴが移動するアプリケーションを作成します。
その他の例については、Qt Quick Examples and Tutorials を参照してください。
Qt Design Studio では、ビジュアルエディタを使ってQt Quick アプリケーションを開発することができます。詳細については、Qt Design Studio ドキュメントを参照してください。
プロジェクトの作成
- File >New Project >Application (Qt) > にアクセスする。 Qt Quick Application.
- Choose を選択して、Project Location ダイアログを開きます。
- Name に、アプリケーションの名前を入力します。自分のプロジェクトに名前を付ける場合、後で簡単に名前を変更できないことに注意してください。
- Create in に、プロジェクトファイルのパスを入力します。後でプロジェクトフォルダを移動しても問題ありません。
- Next を選択すると、Define Project Details ダイアログが開きます。
- Kit Selection ダイアログを開くには、Next を選択します。
- アプリケーションをビルドするプラットフォームの Qt 6.5 以降のキットを選択します。モバイルデバイス用のアプリケーションを構築するには、Android と iOS 用のキットも選択します。
注: リストには、Preferences>Kits で指定したキットが表示されます。詳細については、キットの追加と キットを参照してください。
- Next を選択して、Project Management ダイアログを開きます。
- プロジェクト設定を確認し、Finish （macOS の場合はDone ） を選択してプロジェクトを作成します。
Qt Creator コンポーネント・ファイルMain.qml を生成し、Edit モードで開きます。
アプリケーションのデプロイ
アプリケーションのメインビューには、ビューの左上隅の長方形の中に Qt ロゴが表示され、2 つの空の長方形が表示されます。
アプリケーションの実行時に画像を表示するには、ウィザードが作成したCMakeLists.txt ファイルのRESOURCES セクションでリソースとして指定する必要があります：
qt_add_qml_module(apptransitions
URI transitions
VERSION 1.0
QML_FILES Main.qml Page.qml
RESOURCES qt-logo.png
)カスタムQMLタイプの作成
Window QMLタイプでは子コンポーネントに状態を追加する必要があるため、ウィザードを使用してMain.qml から参照するPageというカスタムQMLタイプを作成してください。
カスタムQMLタイプを作成するには
- File >New File に進みます。
- Qt > を選択します。 QML File (Qt Quick 2).
- Choose を選択し、Location ダイアログを開きます。
- File name に、カスタム QML タイプの名前を入力します：Page と入力します。
- Next を選択し、Project Management ダイアログを開きます。
- Finish を選択して
Page.qmlを作成します。
Qt Creator はEdit モードでPage.qml を開きます。Item というタイプのルート・アイテムがあります。これをRectangle タイプに置き換えます。このタイプに IDpage を与え、四方を親アイテムにアンカーし、色を白に設定します：
import QtQuick Rectangle { id: page anchors.fill: parent color: "#ffffff"
QMLの型名を入力し始めると、Qt Creator 、コードを完成させるために利用可能な型とプロパティが表示されます。
型名の隣にある電球アイコン（
）を選択すると、色、透明度、グラデーションなど、矩形のプロパティを指定するためのツールバーが開きます。
次に、qt-logo.png をソースとする画像タイプを追加します。他の画像やコンポーネントを使うこともできます。画像を矩形の左上隅に配置します：
Image { id: icon x: 20 y: 20 source: "qt-logo.png" }
画像用のツールバーを使って、ソースファイルや塗りつぶしモードなどの画像プロパティを指定します。
次に、画像が移動する矩形を作成します。大きさは画像の大きさに合わせ、透明にして画像が見えるようにします。矩形が見えるように、境界線の色をライトグレーに設定します：
Rectangle { id: topLeftRect width: 55 height: 41 color: "#00ffffff" border.color: "#808080"
矩形を親矩形の左上と左下、および右端の垂直中央に配置するために、矩形を親矩形にアンカーします。次のコード・スニペットは、矩形を親の左上隅にアンカーします：
anchors.left: parent.left anchors.top: parent.top anchors.leftMargin: 20 anchors.topMargin: 20
矩形をユーザーがクリックできるように、MouseArea タイプを追加します：
MouseArea { id: mouseArea anchors.fill: parent
あなたのコードをチェックするには、Page.qml サンプルファイルと比較してください。
次に、ステートを追加し、マウスのクリックをステートの変更に接続することによって、ユーザーが矩形をクリックしたときに画像が矩形の間を移動するようにします。
マウスのクリックを状態の変化につなげる
ユーザーが矩形を選択したときに、画像が矩形の間を移動するようにするには、ページ・コンポーネントに状態を追加して、アイコンの x とy プロパティの値を、右中と左上の矩形の値と一致するように変更します。異なるサイズのスクリーンでビューが拡大縮小されても画像が矩形内に留まるようにするには、iconの x 、y プロパティの値を矩形の値にバインドします：
...
states: [
State {
name: "State1"
},
State {
name: "State2"
PropertyChanges {
target: icon
x: middleRightRect.x
y: middleRightRect.y
}
},
State {
name: "State3"
PropertyChanges {
target: icon
x: bottomLeftRect.x
y: bottomLeftRect.y
}
}
]次に、マウス領域のonClicked シグナルを状態の変化に接続します：
Connections { target: mouseArea function onClicked() { page.state = "State1" }
Qt 6 で開発するため、接続は関数として指定する必要があります。
メインビューにページを追加する
Main.qml を編集用に開き、Page カスタムコンポーネントのインスタンスを追加します：
import QtQuick Window { width: 640 height: 480 visible: true title: qsTr("Transitions") Page { id: page anchors.fill: parent } }
Ctrl+R を選択してアプリケーションを実行し、矩形を選択して Qt ロゴを矩形から別の矩形に移動します。
トランジションのアニメーション
トランジションを作成して、画像にアニメーションを適用します。例えば、middleRightRectに移動すると画像は跳ね返り、bottomLeftRect に移動するとイージングします。
それぞれの状態から他の2つの状態に切り替えるトランジションを指定します：
transitions: [ Transition { id: toState1 ParallelAnimation { SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "y" duration: 200 } } SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "x" duration: 200 } } } to: "State1" from: "State2,State3" },
State2への遷移のイージングカーブタイプをlinearからEasing.OutBounce に変更し、バウンスエフェクトを作成します：
Transition { id: toState2 ParallelAnimation { SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "y" easing.type: Easing.OutBounce duration: 1006 } } SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "x" easing.type: Easing.OutBounce duration: 1006 } } } to: "State2" from: "State1,State3" },
注: アニメーション用のツールバーを使用して、イージングカーブのタイプとアニメーション時間を指定します。
次に、State2への遷移のイージングカーブのタイプをlinearからEasing.InOutQuad に変更して、イージングエフェクトを作成します：
Transition { id: toState3 ParallelAnimation { SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "y" easing.type: Easing.InOutQuad duration: 2000 } } SequentialAnimation { PauseAnimation { duration: 0 } PropertyAnimation { target: icon property: "x" easing.type: Easing.InOutQuad duration: 2000 } } } to: "State3" from: "State1,State2" } ] }
Ctrl+Rを選択してアプリケーションを実行し、矩形を選択してアニメーション化されたトランジションを表示します。
ファイル
画像
Copyright © The Qt Company Ltd. and other contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
