Back to Qt.io
Contact Us Blog Download Qt
このページの内容

チュートリアル：Qt Quick とPython チュートリアル：Qt Quick のデバッグ

チュートリアル：Qt Quick アプリケーション

このチュートリアルでは、 Qt Quickについて解説します。Qt Quick モジュールを使用すると、QMLで滑らかなアニメーションを備えたユーザーインターフェースを構築し、それらをバックエンドのC++ライブラリに接続することができます。

Qt Quick モジュールは、QMLでユーザーインターフェースを作成するために必要なすべての基本型を提供します。ビジュアルキャンバスを提供し、ビジュアルコンポーネントの作成やアニメーション、ユーザー入力の受信などを行うための型が含まれています。利用可能なUIの選択肢に関する詳細については、「ユーザーインターフェース」を参照してください。

このチュートリアルでは、New Project ウィザードによって生成されるサンプルアプリケーションについて説明します。このアプリケーションは、 Qt Quick、Qt Quick Controls、およびQt Quick LayoutsモジュールからQML型をインポートします。また、CMakeビルド構成システムを使用してアプリケーションをビルドおよび実行するためのメインのC++ソースファイルも作成します。

編集モードを使用して、QML コード、C++ コード、およびプロジェクトの CMake ビルド構成を確認します。その後、Android または iOS デバイス上でアプリケーションを実行します。

新しいプロジェクトウィザードを使用して作成されたQt Quickアプリケーション

その他の例については、『Qt Quick の例とチュートリアル』を参照してください。

開発環境のセットアップ

モバイルデバイス向けにアプリケーションをビルドして実行するには、そのデバイスプラットフォーム用の開発環境をセットアップし、Qt Creator とモバイルデバイス間の接続を設定する必要があります。

Android デバイス向けの開発を行うには、「Android 向け開発」の手順に従って、Qt for Androidをインストールし、開発環境を設定する必要があります。

iOS デバイス向けの開発を行うには、Qt for iOS をインストールする必要があります。また、Xcode をインストールし、それを使用してデバイスを設定する必要があります。そのためには、Apple から発行される Apple 開発者アカウントと iOS Developer Program 証明書が必要です。詳細については、「iOS 向けの開発」を参照してください。

プロジェクトの作成

  1. 「File 」 > 「New Project 」 > 「Application (Qt) 」 > Qt Quick Application」に進みます。

    「新しいプロジェクト」ダイアログ

  2. 「Choose 」を選択して、「Project Location 」ダイアログを開きます。
  3. 「Name 」で、アプリケーションの名前を入力します。プロジェクトに名前を付ける際は、後で簡単に名前を変更できないことに留意してください。
  4. 「Create in 」で、プロジェクトファイルのパスを入力します。プロジェクトフォルダは後で問題なく移動できます。
  5. 「Next 」を選択して、「Define Project Details 」ダイアログを開きます。

    「プロジェクトの詳細」ダイアログ

  6. 「Next 」を選択して、「Kit Selection 」ダイアログを開きます。
  7. アプリケーションをビルドする対象となるプラットフォームのキットを選択します。モバイルデバイス向けのアプリケーションをビルドするには、Android および iOS のキットも選択してください。

    注: このリストには 、「Preferences 」>「Kits 」で指定したキットが表示されます。詳細については、「キットの追加」および「キットの管理」を参照してください。

  8. 「Next 」を選択して、「Project Management 」ダイアログを開きます。
  9. プロジェクト設定を確認し、「Finish 」（macOS の場合は「Done 」）を選択してプロジェクトを作成します。

Qt Creator これにより、コンポーネントファイル「Main.qml 」が生成され、Edit モードで開かれます。

アプリケーションのプレビュー

アプリケーションのメインビューには、背景色、テキスト、およびボタンが付いた 2 つの矩形が表示されます。ボタンを選択すると、アプリケーションのライトモードとダークモードが切り替わります。

  • アプリケーションをプレビューするには、上部のツールバーにある「ライブプレビュー 」を選択します。
  • デスクトップ上でアプリケーションを実行するには、[「実行」ボタン] を選択します。

QMLコードを確認する

Main.qml を開いて、生成された QML コードを確認します。

QMLのインポート

このファイルには、アプリケーションで使用される Qml 型を含む Qt Qml モジュールに対する import 文が含まれています:

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Basics

メインウィンドウ

このファイルには、メインウィンドウを作成するApplicationWindow QML 型のインスタンスが含まれています。ウィンドウのプロパティでは、初期サイズと最小サイズ、およびウィンドウのタイトルが設定されています。また、ウィンドウが画面上に表示されるよう指定されています。

ApplicationWindow {
    id: window
    width: 640
    height: 480
    minimumWidth: 200
    minimumHeight: 250
    visible: true
    title: qsTr("Hello World")

    property bool lightMode: Application.styleHints.colorScheme === Qt.Light
    property color reallyDark: "#1f1f1f"
    property color dark: "#262626"
    property color reallyLight: "#e7e7e7"
    property color light: "#e0e0e0"

カスタムプロパティでは、ライトモードおよびダークモードにおけるアプリケーションの色を設定しています。

レイアウト

このウィンドウには、Qt Quick のLayoutsモジュールに含まれるGridLayout というQML型のインスタンスが含まれており、これによりRectangle型のインスタンス2つがグリッド上に配置されます。グリッドのプロパティでは、列の幅や行と列の間隔が設定されるほか、グリッドのサイズがウィンドウのサイズに連動するように設定されています。

GridLayout {
    id: grid
    columns: width < 400 ? 1 : 2
    rowSpacing: 0
    columnSpacing: 0
    anchors.fill: parent

実行中のアプリケーションで列幅が400ピクセル未満になった場合、矩形は1列に配置されます。

狭いウィンドウ内で実行されているアプリケーション

基本的な QML タイプ

Rectangle 型の各インスタンスには、タイプ ID と色を設定するプロパティがあります。矩形の色は、現在のモードにおけるウィンドウの色にバインドされています。Layoutプロパティにより、矩形はグリッドセルに収まるように配置されます。

Rectangle {
    id: rectangle1
    color: window.lightMode ? window.reallyLight : window.reallyDark
    Layout.fillHeight: true
    Layout.fillWidth: true

両方の矩形にはColumnLayout が含まれており、これらはQt Quick のControlsモジュールにあるLabel およびButton 型のインスタンスを配置します。

ColumnLayout {
    anchors.fill: parent
    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop

「レイアウト」プロパティにより、列が矩形の上部中央に揃えられ、テキストとボタンを配置するためにレイアウトの上部および下部の余白が設定されます。

プロパティの変更

アプリケーションをプレビューすると、コード内のプロパティの値を変更して、その変更を即座に確認することができます。

色、余白、配置を変更して、さまざまな表示を試してみてください。

Qt Quick コントロール

Qt Quick の「Controls」モジュールには、Qt Quick で完全なユーザーインターフェースを構築するための一連のコントロールが用意されています。このアプリケーションには、LabelおよびButtonコントロールのインスタンスが含まれています。

Label

Label のプロパティでは、見出しテキスト、その色、およびピクセル単位のサイズを設定します。また、要素の幅と高さ内でラベルテキストを水平方向および垂直方向に中央揃えにし、列幅が変更された場合にラベル内のテキストが収まるようにフォントサイズを調整します。

Layoutプロパティにより、ラベルは16ピクセルの余白を持たせてグリッドセルに収まるように設定されています。

Label {
    id: text1
    color: window.lightMode ? window.dark : window.light
    font.pixelSize: 120
    fontSizeMode: Text.Fit
    text: qsTr("Hello World")
    Layout.fillWidth: true
    Layout.fillHeight: true
    Layout.margins: 16
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

Button

Button のtext プロパティは、ウィンドウモードに応じてボタンのアイコンとテキストを設定します。

Layout プロパティは、ボタンを長方形の底辺の中央に配置し、ボタンを配置するためのレイアウトの下マージンを設定します。

Button {
    id: button1
    text: window.lightMode ? qsTr("\u263D  Dark mode")
                           : qsTr("\u263C  Light mode")

        Layout.bottomMargin: 16
        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
    ...
}

Text プロパティは、ボタンのテキスト、色、フォントをウィンドウモードに紐付けます。

...
contentItem: Text {
    text: button1.text
    color: window.lightMode ? window.light : window.dark
    font: button1.font
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
}

background 項目は、Rectangle 型のインスタンスを保持します。矩形のプロパティにより、ボタンの角が丸くなり、ウィンドウモードに応じてボタンの背景色が設定されます。

    ...
    background: Rectangle {
        implicitWidth: 120
        implicitHeight: 36
        radius: 8
        color: window.lightMode ? window.dark : window.light
    }
    ...
}

スタイルの変更

このサンプルアプリケーションでは、Qt Quick コントロールに「Basic」スタイルを使用しています。これは、シンプルで軽量な汎用スタイルであり、最高のパフォーマンスを発揮します。

iOS、macOS、Android用のMaterialなど、ターゲットプラットフォームに応じて選択できるスタイルが他にもいくつかあります。さまざまなスタイルを試すには、import QtQuick.Controls にスタイル名を追加します。例：import QtQuick.Controls.Material 。

Qt 6.12 以降では、QtQuick.Controls.Native をインポートできるようになり、これによりターゲットプラットフォームのデフォルトスタイルがインポートされます。

利用可能なスタイルの詳細については、「 Qt Quick コントロールのスタイル設定」を参照してください。

シグナルとシグナルハンドラ

Button 型のonClicked シグナルハンドラは、ボタンのクリックに応答します。サンプルアプリケーションでは、このボタンを選択すると、ライトモードとダークモードが切り替わります。

            Button {
                id: button1
                text: window.lightMode ? qsTr("\u263D  Dark mode")
                                       : qsTr("\u263C  Light mode")
                Layout.bottomMargin: 16
                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom

                contentItem: Text {
                    text: button1.text
                    color: window.lightMode ? window.light : window.dark
                    font: button1.font
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                background: Rectangle {
                    implicitWidth: 120
                    implicitHeight: 36
                    radius: 8
                    color: window.lightMode ? window.dark : window.light
                }

                onClicked: window.lightMode = !window.lightMode
            }
        }
    }
}

C++ ソースコードの確認

main.cpp ファイルを開いて、生成された C++ コードを確認してください。このファイルでは、アプリケーション `app` とアプリケーションエンジン `engine` が宣言されています。アプリケーションの実行時に、エンジンはメインの QML ファイルをロードします。

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreationFailed,
        &app,
        []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    engine.loadFromModule("HelloWorld", "Main");

    return QGuiApplication::exec();
}

CMake設定ファイルを確認する

ウィザードは、アプリケーションをビルドするためのCMakeLists.txt 設定ファイルを生成します。

RESOURCES セクションには、アプリケーションのソースファイルが一覧表示されます。プロジェクトにソースファイルを追加すると、Qt Creator によって自動的にそのセクションに追加されます。

詳細については、「CMake によるビルド」を参照してください。

デバイス上でアプリケーションを実行する

これで、アプリケーションをデバイスにデプロイして実行できるようになります。

  1. Android デバイスではUSB デバッグを、iOS デバイスでは開発者モードを有効にします。
  2. デバイスを開発用PCに接続します。
  3. Projects にアクセスし、プロジェクトに適したキットを有効にします。
  4. Preferences > [Kits ] > [Kits] に移動し、[Run device] および [Device] のリストからデバイスを選択します。
  5. デバイス上でアプリケーションを実行するには、Ctrl+R を選択します。

関連項目： プロジェクトのキットを有効にする、Android へのアプリケーションのデプロイ、CMake を使用したビルド方法、 Qt Quick UI の設計方法、 Qt Quick UI デザイン、 Qt Quick UI の設計、および Qt Quick でのプログラミング入門：アラームアプリケーション。

チュートリアル：Qt Quick とPython チュートリアル：Qt Quick のデバッグ

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.