QMLの基礎 - ウインドウ

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

静的宣言方式

静的宣言方式は、QMLファイル内で直接ウインドウやコンポーネントを宣言する方法である。
これは、直接的な実装を行う場合に適している。

静的宣言方式の特徴を以下に示す。

• コードが簡潔で可読性が良い。
• デザイン時にレイアウトが理解しやすい。
• アプリケーション起動時の初期化が速い。
• 宣言されたオブジェクトは常に存在するため、常にメモリを消費する。

以下の例では、静的宣言方式を使用して、ウインドウ間の表示・非表示をスイッチングしている。

• メインウィンドウ

  2つのボタンがあり、各ボタンを押下する時、メインウインドウが非表示になりサブウインドウが開く。

  各サブウィンドウのボタンを押下する時、サブウインドウを閉じて、メインウインドウが再度表示される。

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

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

 signal closeThisWindow
 
 onCloseThisWindow: {
    // Some code
 }

 // AnotherWindow.qml
 
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Window
 
 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()  // シグナルを発行する
       }
    }
 }

 // main.qmlファイル
 
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
 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
       }
    }
 }