QMLの基礎 - ウインドウ

ウインドウのオープン / クローズ

ウィンドウの表示および非表示する等、ウィンドウ間のスイッチングを実装する手順を記載する。

まず、QMLにおけるシグナルの構文を以下に示す。

シグナル(signal <シグナル名>)を宣言して、シグナルの定義を記述する。
シグナルの定義名は、プレフィックスに"on"という文字を付加して、シグナル名の先頭文字を大文字にする必要がある。

 signal closeThisWindow
 
 onCloseThisWindow: {
    // Some code
 }

以下の例では、メインウインドウの上ボタンを押下する時、メイン画面を非表示にしてサブウインドウを開く。
サブウインドウを閉じる時、メイン画面を再度表示する。

シグナルは、以下の例のように、サブウィンドウにおいて関数として呼び出される。

なお、.proファイルとmain.cppファイルは変更していない。

 // AnotherWindow.qml
 
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Window 2.15
 
 Window {
    id: anotherWindow
    width:480
    height:320
 
    signal signalExit  // シグナルの宣言
 
    // Button to open the main application window
    Button {
       text: qsTr("メインウインドウに戻る")
       width: 180
       height: 50
       anchors.centerIn: parent
 
       onClicked: {
          anotherWindow.signalExit()  // シグナルを発行する
       }
    }
 }

メインウインドウのqmlファイル(main.qmlファイル)には、ソフトウェアの主となるロジックを実装する。

以下の例では、メインウィンドウには2つのボタンがあり、各ボタンを押下する時、メインウィンドウが非表示になりサブウインドウが開く。
各サブウィンドウのボタンを押下する時、サブウィンドウが閉じられて、メインウインドウが再度表示される。

 // main.qmlファイル
 
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
 ApplicationWindow {
    id: mainWindow
    width: 640
    height: 480
    title: qsTr("Switching between windows in QML")
    visible: true
 
    Rectangle {
       anchors.fill: parent
       color: "white"
 
       GridLayout {
          id: grid
          anchors.fill: parent
 
          rows: 2
          columns: 1
 
          Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
             Layout.column: 1
             Layout.row: 1
 
             // Button to open the first secondary application window
             Button {
                text: qsTr("サブウインドウ 1 を開く")
                anchors.centerIn: parent
                width: 300
                height: 50
 
                onClicked: {
                   firstWindow.show()  // Open the first window
                   mainWindow.hide()   // Hide the main window
                }
             }
          }
 
          Rectangle {
             Layout.fillHeight: true
             Layout.fillWidth: true
             Layout.column: 1
             Layout.row: 2
 
             // Button to open the second secondary application window
             Button {
                text: qsTr("サブウインドウ 2 を開く")
                anchors.centerIn: parent
                width: 300
                height: 50
 
                onClicked: {
                   secondWindow.show() // Open a second window
                   mainWindow.hide()   // Hide the main window
                }
             }
          }
       }
    }
 
    AnotherWindow {
       id: firstWindow
       title: qsTr("サブウインドウ 1")
 
       // The signal handler for the opening of the main window
       onSignalExit: {
          firstWindow.close()     // Close the first window
          mainWindow.show()       // Shows the main window
       }
    }
 
    AnotherWindow {
       id: secondWindow
       title: qsTr("サブウインドウ 2")
 
       // The signal handler for the opening of the main window
       onSignalExit: {
          secondWindow.close()    // We close the second window
          mainWindow.show()       // Shows the main window
       }
    }
 }