Qt Quick ハウツー

このページは、Qt Quick で特定のタスクを実行するための最も簡単かつ最適な方法を示す、見つけやすく実用的なリファレンスを提供することを目的としています。各解決策には、必要に応じてQMLおよび/またはC++のコードスニペットが掲載されており、すべてのスニペットはQtによって自動的にテストされ、正常に動作し続けることが保証されています。

「～するには：」

ボタンがクリックされたときに、QMLからC++関数を呼び出す

C++の型をアプリケーション内のQMLファイルからグローバルに利用できるようにする場合、最も簡単な方法は、QML_SINGLETONを使用してQMLシングルトンにすることです。例えば、ヘッダーファイルbackend.h では、次のように記述します：

#include <QObject>
#include <QQmlEngine>

class Backend : public QObject
{
    Q_OBJECT
    QML_ELEMENT
    QML_SINGLETON

public:
    Q_INVOKABLE void doStuff();
};

backend.cpp:

#include "backend.h"

#include <QDebug>

voidBackend::doStuff()
{
    qDebug() << "Did stuff!";
}

その後、どのQMLファイルからでもその関数を呼び出すことができます：

import QtQuick.Controls

import MyModule

ApplicationWindow {
    width: 400
    height: 400
    title: qsTr("C++ Button example")

    Button {
        text: qsTr("Click me")
        onClicked: Backend.doStuff()
    }
}

C++ 型を少数の QML ファイルでのみ利用可能にする必要がある場合は、QML_ELEMENT の使用を検討してください。C++ 型を QML に公開するその他の方法については、「C++ と QML の適切な統合方法の選択」を参照してください。

この例では、Backend 型が QML モジュールで利用可能であることを前提としています。CMake を使用する場合、これはqt_add_qml_module によって行われます。これを詳細に説明した例については、「QML アプリケーションのビルド」を参照してください。

アクティブなフォーカスがある項目を確認する

ウィンドウのactiveFocusItem プロパティに対するプロパティ変更シグナルハンドラを記述します：

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    width: 400
    height: 400
    visible: true
    title: qsTr("Active focus debugging example")

    onActiveFocusItemChanged: print("activeFocusItem: " + activeFocusItem)

    Row {
        TextField {
            objectName: "textField1"
        }
        TextField {
            objectName: "textField2"
        }
    }
}

これにより、現在アクティブなフォーカスを持っている項目がコンソールに出力されます。出力が有用なものになるよう、各項目に説明的なobjectName を設定してください。

AndroidのTimePickerDialogのようなタイムピッカーを作成してください。

これを実現する方法を示す、いくつかのQMLファイルからなるサンプルを用意しました。これらをアプリケーションで次のように使用できます：

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Material

ApplicationWindow {
    id: window
    width: 600
    height: 600
    visible: true
    title: qsTr("Time Picker Example")

    Material.theme: darkThemeSwitch.checked ? Material.Dark : Material.Light

    // Shows the selected time and opens the dialog.
    TimeComponentLabel {
        id: openDialogLabel
        width: parent.width - 80
        anchors.centerIn: parent
        font.pixelSize: Qt.application.font.pixelSize * 8
        renderTypeQuality: Text.VeryHighRenderTypeQuality
        interactive: !timePickerDialog.opened

        text: Qt.formatTime(new Date(1970, 1, 1, timePickerDialog.hours, timePickerDialog.minutes), "hh:mm")

        onTapped: timePickerDialog.openWithMode(TimePicker.Mode.Hours)
    }

    ColumnLayout {
        // We always want the openDialogLabel to be centered in the window, not us.
        // For that reason, we use anchors rather than putting the root items into a ColumnLayout.
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: openDialogLabel.bottom
        anchors.topMargin: 24
        spacing: 12

        Switch {
            id: is24HourSwitch
            text: qsTr("24 Hour")
            checked: timePickerDialog.is24Hour
        }
        Switch {
            id: darkThemeSwitch
            text: qsTr("Dark")
        }
    }

    TimePickerDialog {
        id: timePickerDialog
        anchors.centerIn: parent
        is24Hour: is24HourSwitch.checked

        onTimeAccepted: print("A time was chosen - do something here!")
    }
}

ライトテーマの円形セレクタ付き日時選択ダイアログ

ライトテーマのTimePickerDialog。

ダークテーマで円形セレクターを備えた日時選択ダイアログ

ダークテーマのTimePickerDialog。

JavaScriptでC++のenumを使用する

C++の列挙型をJavaScriptから利用可能にするには（つまり、QJSEngine であり、QQmlEngine やQQmlApplicationEngine ではない）、newQMetaObject() およびregisterModule() を使用します：

    QJSEngine engine;
    engine.installExtensions(QJSEngine::AllExtensions);

    QJSValue metaObjects = engine.newObject();
    const QJSValue backendJsMetaObject = engine.newQMetaObject(&Backend::staticMetaObject);
    metaObjects.setProperty("Backend", backendJsMetaObject);
    // Repeat the two lines above for other types as needed.
    engine.registerModule("MyApp", metaObjects);

    Backend backend(&engine);
    const bool loaded = backend.load();

これで、JavaScript からその enum を使用できるようになります：

export function backendStatusUpdate(backendStatus) {
    if (backendStatus === Backend.Error) {
        console.warn("Error!")
        return
    }

    console.log("Backend loaded successfully")
}

QQmlEngine やQQmlApplicationEngine を使用する場合、より簡単な選択肢があります。詳細については、「C++とQML間の適切な統合方法の選択」を参照してください。

backend.h:

#include <QObject>
#include <QJSEngine>

class Backend : public QObject
{
    Q_OBJECT

public:
    Backend(QJSEngine *engine);

    enum Status {
        Unknown,
        Error,
        Loading,
        Loaded
    };

    Q_ENUM(Status)

    bool load();

private:
    QJSEngine *mEngine = nullptr;
};

backend.cpp:

#include "backend.h"

Backend::Backend(QJSEngine*engine) :
    mEngine(engine)
{
}

boolBackend::load()
{
    // ここで何らかの読み込み処理を行う...

    constQJSValue module= mEngine->importModule(":/script.mjs");
    if(module.isError()) {
        qWarning() << "Error loading script.mjs:" << module.toString();
       return false;
    }

    constQJSValue function=module.property("backendStatusUpdate");
    if(!function.isCallable()) {
        qWarning() << "backendStatusUpdate script function is not callable!";
       return false;
    }

    constQJSValue functionResult=function.call(QJSValueList()<<Loaded);
    if(functionResult.isError()) {
        qWarning() << "backendStatusUpdate script function had errors:" << functionResult.toString();
       return false;
    }

    return true;
}

詳細については、QObject Integration を参照してください。

ゲージの作成

この方法を実演する、いくつかのC++ ファイルと QML ファイルで構成されるサンプルを用意しました。これらは、以下の方法でアプリケーションで使用できます:

import QtQuick.Controls

import GaugeHowTo

ApplicationWindow {
    width: 400
    height: 400
    title: qsTr("Gauge example")

    Gauge {
        minimumValue: 0
        value: 75
        maximumValue: 100
    }
}

0～100の目盛りで、値が75に設定された縦型ゲージ

仕上げ

© 2026 The Qt Company Ltd. 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.