QMLの基礎 - ダイアログ

提供：MochiuWiki : SUSE, EC, PCB
ナビゲーションに移動 検索に移動

概要



ディレクトリ選択ダイアログ

FolderDialog

まず、必要なモジュールをインポートして、FolderDialogコンポーネントを使用する。

FolderDialogコンポーネントのプロパティを以下に示す。

  • titleプロパティ
    ダイアログのタイトルを設定する。
  • currentFolderプロパティ
    初期表示するフォルダを設定する。
    StandardPathsを使用することにとより、プラットフォーム間で一貫した方法で標準的なディレクトリを参照できる。

    以下の例では、StandardPathsを使用してドキュメントディレクトリを指定している。


FolderDialogコンポーネントのシグナルハンドラ (スロット) を以下に示す。

  • onAcceptedハンドラ
    ディレクトリが選択された場合の処理を定義する。
  • onRejectedハンドラ
    キャンセルされた場合の処理を定義する。


 import QtCore
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Dialogs
 
 // ...略
 
 FolderDialog {
    id: folderDialog
    title: "フォルダを選択してください"
    currentFolder: StandardPaths.standardLocations(StandardPaths.DocumentsLocation)[0]
    options: FolderDialog.ShowDirsOnly | FolderDialog.DontResolveSymlinks
    acceptLabel: "選択"
    rejectLabel: "キャンセル"
    modality: Qt.WindowModal
 
    onAccepted: {
       console.log("選択されたフォルダ: " + folderDialog.selectedFolder)
       selectedFolderText.text = "選択されたフォルダ: " + folderDialog.selectedFolder
    }
 
    onRejected: {
       console.log("フォルダ選択がキャンセルされました")
    }
 
    onFolderChanged: {
       console.log("現在のフォルダが変更されました: " + folderDialog.currentFolder)
    }
 
    onVisibleChanged: {
       if (visible) {
          console.log("フォルダダイアログが開かれました")
       }
       else {
          console.log("フォルダダイアログが閉じられました")
       }
    }
 }
 
 Column {
    spacing: 20
    anchors.centerIn: parent
 
    // ダイアログを表示するためのトリガ (例: ボタン)
    Button {
       text: "フォルダを選択"
       onClicked: folderDialog.open()
    }
 
    Text {
       id: selectedFolderText
       text: "選択されたフォルダ: なし"
    }
 }
 
 Component.onCompleted: {
    // ディレクトリ選択ダイアログの初期設定およびカスタマイズをここで行うこともできる
    folderDialog.currentFolder = StandardPaths.standardLocations(StandardPaths.HomeLocation)[0]
 }


この実装を使用することで、ユーザーはボタンをクリックしてフォルダ選択ダイアログを開き、フォルダを選択できます。選択されたフォルダのパスは画面に表示され、コンソールにも出力されます。

追加の注意点：

- `FolderDialog`の`folder`プロパティは非推奨となっており、代わりに`currentFolder`を使用することが推奨されています。 - `StandardPaths`を使用することで、プラットフォーム間で一貫した方法で標準的なフォルダを参照できます。 - 実際のアプリケーションでは、選択されたフォルダのパスを使用して、ファイル操作やその他の処理を行うことができます。

このコードをカスタマイズして、特定のアプリケーションのニーズに合わせることができます。例えば、選択されたフォルダ内のファイル一覧を表示したり、特定の種類のファイルのみを扱うようにフィルタリングしたりすることが可能です。


※注意
Qt.labs Platformモジュールのアイテムは、将来のバージョンでの互換性が保証されていない。

ディレクトリ選択ダイアログを表示するには、FolderDialogの定義やプロパティを記述して、openメソッドを呼び出す。


currentFolderプロパティは、ダイアログ内で現在選択されているディレクトリのURLが設定される。
folderプロパティは、ダイアログの選択ボタンにより選択された後にのみ設定される。

QWidgetのディレクトリ選択ダイアログ

QMLからQWidgetのファイル選択ダイアログを使用することもできる。

ただし、純粋なQMLアプリケーションではなくなることに注意する。

QWidgetを使用するには、QGuiApplicationからQApplicationに変更する必要がある。
つまり、QWidgetインスタンスの作成に必要な機能を提供するQApplicationを使用する。

  • QGuiApplication
    ウインドウやGUI (OpenGLやQtQuick等のウィジェットに関連しないもの) の処理に関連するものである。
  • QApplication
    ウィジェットの処理に関連する機能であり、QGuiApplicationを拡張するものである。

FolderDialogは、ネイティブプラットフォームのディレクトリ選択ダイアログのためのQML APIを提供する。

※注意
Qt.labs Platformモジュールのアイテムは、将来のバージョンでの互換性が保証されていない。

Qt Labs Platformモジュールは、ネイティブな実装が利用できないプラットフォーム上のフォールバックとしてQt Widgetsを使用している。
したがって、Qt Labs Platformモジュールのアイテムを使用する場合、
QtWidgetsライブラリをリンクして、QGuiApplicationクラスの代わりにQApplicationクラスを使用する必要がある。

まず、QtWidgetsライブラリをリンクするには、.proファイルに以下の設定を追記する。

 # Qtプロジェクトファイル (.pro)
 
 QT += widgets


main関数において、QGuiApplicationクラスの代わりにQApplicationクラスのインスタンスを生成する。

 // main.cppファイル
 
 #include <QApplication>
 #include <QQmlApplicationEngine>
 
 // ...略
 
 int main(int argc, char *argv[])
 {
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 #endif
 
    QApplication app(argc, argv);
    QQmlApplicationEngine engine;
 
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, &app,
                     [url](QObject *obj, const QUrl &objUrl)
                     {
                        if (!obj && url == objUrl)
                        {
                           QCoreApplication::exit(-1);
                        }
                     }, Qt::QueuedConnection);
 
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
 
    return app.exec();
 }


FileDialogやStandardPathsも参照すること。

FileDialogのプロパティを以下に示す。

  • acceptLabel
    値 : string型 (既定値 : 空の文字列)

    ダイアログの選択ボタンに表示されるラベルテキストを設定する。
    空の文字列を設定すると、プラットフォームの標準のラベルテキスト(Open)が使用される。

    rejectLabelプロパティも参照すること。

  • rejectLabel
    値 : string (既定値 : 空の文字列)

    ダイアログのキャンセルボタンに表示されるラベルテキストを設定する。
    空の文字列を設定すると、プラットフォームの標準のラベルテキスト(Cancel)が使用される。

    acceptLabelプロパティも参照すること。

  • currentFolder
    値 : url型 (既定値 : なし)

    ダイアログで現在選択されているフォルダを設定する。
    folderプロパティとは異なり、currentFolderプロパティは、ダイアログ内でディレクトリを選択している間、最終的な選択がなされる前でも更新される。

    folderプロパティも参照すること。

  • folder
    値 : url型 (既定値 : なし)

    最終的に選択されたディレクトリのURLが設定される。
    currentFolderプロパティとは異なり、folderプロパティはダイアログでディレクトリを選択している間は更新されず、最終的な選択が行われた後にのみ更新される。
    つまり、Openボタンを押下した場合、または、acceptedシグナルを処理して最終選択をした場合のみである。

    currentFolderプロパティおよびacceptedメソッドも参照すること。

  • options
    値 : enumlation型 (既定値 : なし)

    ダイアログの外観に影響を与える様々なオプションを設定する。
    既定値では、全てのオプションが無効になっている。
    optionsプロパティは、ダイアログを表示する前に設定する必要がある。
    ダイアログが表示されている間に設定を変更した場合、ダイアログに影響を与えることは保証されていない。

    使用可能なoptionsプロパティの値を、以下に示す。
定数 説明
FolderDialog.ShowDirsOnly ディレクトリのみを表示する。
既定値では、フォルダとディレクトリの両方を表示する。
FolderDialog.DontResolveSymlinks シンボリックリンクを解決しない。
既定値では、シンボリックリンクを解決する。
FolderDialog.ReadOnly ダイアログ内でディレクトリの作成を許可しない。


ファイル選択ダイアログ

FileDialogコンポーネント

まず、必要なモジュールをインポートして、FileDialogコンポーネントを使用して、ファイル選択ダイアログを作成する。
これは、一般的に、アプリケーションのメインウィンドウや特定のコンポーネント内で記述する。

FileDialogコンポーネントのプロパティを以下に示す。

  • titleプロパティ
    ダイアログのタイトルを設定する。
  • nameFiltersプロパティ
    表示するファイルタイプを制限することができる。
  • selectedFilesプロパティ
    選択されたファイルのパスが配列として格納される。
    一般的に、単一ファイル選択の場合は、selectedFiles[0]を使用する。
  • fileModeプロパティ
    ファイル選択モードを指定する。
    単一ファイル選択または複数ファイル選択等を指定することができる。

    指定できる値を以下に示す。
    • FileDialog.OpenFile
      単一ファイルを選択する。 (デフォルト)
    • FileDialog.OpenFiles
      複数ファイルを選択する。
    • FileDialog.SaveFile
      ファイルを保存する。
  • optionsプロパティ
    ダイアログの動作オプションを設定する。
    指定できる値を以下に示す。
    • FileDialog.ReadOnly
      読み取り専用モード
    • FileDialog.DontResolveSymlinks
      シンボリックリンクを解決しない。
  • currentFolderプロパティ
    初期表示するディレクトリを指定する。
  • selectedFileプロパティ
    選択されたファイルのURLを保持する。 (単一ファイル選択時)
  • selectedFilesプロパティ
    選択されたファイルのURL配列 (複数ファイル選択時)
  • acceptLabelプロパティ
    [開く]ボタンおよび[保存]ボタンのラベルをカスタマイズする。
  • rejectLabelプロパティ
    [キャンセル]ボタンのラベルをカスタマイズする。


FileDialogコンポーネントのシグナルハンドラ (スロット) を以下に示す。

  • onAcceptedハンドラ
    ファイルが選択された場合の処理を定義する。
  • onRejectedハンドラ
    ダイアログがキャンセルされた場合の処理を定義する。
  • selectionChangedハンドラ
    ファイル選択が変更された時に発行される。


ファイル選択ダイアログを表示する場合は、openメソッドを実行してダイアログを表示する。

 import QtQuick
 import QtQuick.Controls
 import QtQuick.Dialogs
 
 // ...略
 
 FileDialog {
    id: fileDialog
    title: "ファイルを選択してください"
    nameFilters: ["テキストファイル (*.txt)", "すべてのファイル (*)"]
    fileMode: FileDialog.OpenFile
    options:  FileDialog.ReadOnly
 
    // ファイルを選択した場合
    onAccepted: {
        console.log("選択されたファイル:", fileDialog.selectedFiles)
        selectedFileText.text = "選択されたファイル: " + fileDialog.selectedFiles[0]
    }
 
    // ファイル選択が変更された場合
    onSelectionChanged: {
       console.log("現在選択中: ", fileDialog.currentFile)
    }
 
    // キャンセルした場合
    onRejected: {
       console.log("ファイル選択がキャンセルされました")
    }
 }

 Column {
    anchors.centerIn: parent
    spacing: 20
 
    // ダイアログを表示するためのトリガ (例: ボタン)
    Button {
       text: "ファイルを開く"
       onClicked: fileDialog.open()
    }
 
    Text {
       id: selectedFileText
       text: "ファイルが選択されていません"
    }
 }


※注意
Qt 6以降では、QtQuick.Dialogsモジュールを使用する。
Qt 5では、Qt.labs.platformモジュールを使用する。

ファイル選択ダイアログの動作は、使用しているプラットフォーム (Windows、MacOS、Linux) により異なる場合がある。

QWidgetのファイル選択ダイアログ

QMLからQWidgetのファイル選択ダイアログを使用することもできる。

ただし、純粋なQMLアプリケーションではなくなることに注意する。

QWidgetを使用するには、QGuiApplicationからQApplicationに変更する必要がある。
つまり、QWidgetインスタンスの作成に必要な機能を提供するQApplicationを使用する。

  • QGuiApplication
    ウインドウやGUI (OpenGLやQtQuick等のウィジェットに関連しないもの) の処理に関連するものである。
  • QApplication
    ウィジェットの処理に関連する機能であり、QGuiApplicationを拡張するものである。
 // main.cppファイル
 
 #include <QApplication>
 #include <QQmlApplicationEngine>
 
 int main(int argc, char *argv[])
 {
    set_qt_environment();
 
    QGuiApplication app(argc, argv);
 
    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/qt/qml/Main/main.qml"_qs);
    QObject::connect(
       &engine,
       &QQmlApplicationEngine::objectCreated,
       &app,
       [url](QObject *obj, const QUrl &objUrl) {
          if (!obj && url == objUrl)
             QCoreApplication::exit(-1);
       },
       Qt::QueuedConnection);
 
    engine.addImportPath(QCoreApplication::applicationDirPath() + "/qml");
    engine.addImportPath(":/");
 
    engine.load(url);
 
    if (engine.rootObjects().isEmpty()) {
       return -1;
    }
 
    return app.exec();
 }



「http://mochiuwiki.e2.valueserver.jp/index.php?title=QMLの基礎_-_ダイアログ&oldid=10763」から取得