「QMLの基礎 - ウインドウ」の版間の差分

ナビゲーションに移動 検索に移動
154行目: 154行目:
<br>
<br>
==== 動的生成方式 ====
==== 動的生成方式 ====
動的生成方式は、<code>Qt.createComponent</code>メソッドおよび<code>Component.createObject</code>メソッドを使用して、動的にコンポーネントおよびオブジェクトを生成する方法である。
動的生成方式は、<code>Qt.createComponent</code>メソッドおよび<code>Component.createObject</code>メソッドを使用して、動的にコンポーネントおよびオブジェクトを生成する方法である。<br>
<br>
<br>
動的生成方式の特徴を以下に示す。<br>
動的生成方式の特徴を以下に示す。<br>
175行目: 175行目:
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
以下の例では、メインウインドウのボタンを押下する時、各プロパティに初期値を渡して別のウインドウを開いている。<br>
  <syntaxhighlight lang="qml">
  <syntaxhighlight lang="qml">
  // SecondWindow.qml
  // SecondWindow.qml
183行目: 184行目:
   
   
  ApplicationWindow {
  ApplicationWindow {
     id: secondWindow
     id:     secondWindow
     width: 400
     width:   400
     height: 300
     height: 300
     visible: true
     visible: true
   
   
225行目: 226行目:
   
   
  ApplicationWindow {
  ApplicationWindow {
     id: mainWindow
     id:     mainWindow
     width: 640
     width:   640
     height: 480
     height: 480
     visible: true
     visible: true
     title: qsTr("Main Window")
     title:   qsTr("Main Window")
   
   
     Button {
     Button {
242行目: 243行目:
           });
           });
           window.show();
           window.show();
      }
    }
}
</syntaxhighlight>
<br>
===== シグナル / シグナルハンドラの定義 =====
動的生成方式において、コンポーネントを生成して、そのコンポーネントにシグナルを定義して、シグナルハンドラで受信することもできる。<br>
<br>
以下の例では、サブウインドウでwindowClosedシグナルを定義して、メインウインドウで動的に生成したサブウインドウのシグナルを接続・受信している。<br>
<br>
ボタンを押下する時、サブウインドウが開く。<br>
サブウインドウのボタンを押下する時、サブウインドウを閉じてシグナルがメインウインドウに送信される。<br>
<br>
<syntaxhighlight lang="qml">
// DynamicWindow.qml
import QtQuick
import QtQuick.Window
import QtQuick.Controls
Window {
    id:      dynamicWindow
    width:  400
    height:  300
    visible: true
    title: windowTitle
    property string windowTitle: "Dynamic Window"
    signal windowClosed(string message)
    Column {
      anchors.centerIn: parent
      spacing: 20
      Button {
          text: "Close Window"
          onClicked: {
            dynamicWindow.windowClosed("Window is closing")
            dynamicWindow.close()
          }
      }
    }
}
</syntaxhighlight>
<br>
<syntaxhighlight lang="qml">
// MainWindow.qml
import QtQuick
import QtQuick.Window
import QtQuick.Controls
Window {
    id:      mainWindow
    width:  640
    height:  480
    visible: true
    title:  qsTr("Main Window")
    Column {
      anchors.centerIn: parent
      spacing: 20
      Button {
          text: "Create Dynamic Window"
          onClicked: {
            var component = Qt.createComponent("DynamicWindow.qml");
            if (component.status === Component.Ready) {
                var dynamicWindow = component.createObject(mainWindow, {"windowTitle": "New Dynamic Window"});
                // シグナルの接続
                dynamicWindow.windowClosed.connect(function(message) {
                  console.log("Received signal:", message);
                  statusText.text = "Last signal: " + message;
                });
            }
          }
      }
      Text {
          id:  statusText
          text: "No signal received yet"
      }
    }
}
</syntaxhighlight>
<br>
===== メソッドの定義 / 戻り値の受け取り =====
動的生成方式において、コンポーネントを生成して、そのコンポーネントに定義したメソッドの戻り値を受け取ることもできる。<br>
<br>
以下の例では、サブウインドウでgetWindowInfoメソッドを定義して、メインウインドウで動的に生成したサブウインドウのメソッドを実行して、戻り値を取得している。<br>
<br>
ボタンを押下する時、サブウインドウが開く。<br>
サブウインドウのボタンを押下する時、サブウインドウを閉じてシグナルがメインウインドウに送信される。<br>
<br>
<syntaxhighlight lang="qml">
// DynamicWindow.qml
import QtQuick
import QtQuick.Window
import QtQuick.Controls
Window {
    id:      dynamicWindow
    width:  400
    height:  300
    visible: true
    title:  windowTitle
    property string windowTitle: "Dynamic Window"
    function getWindowInfo() {
      return {
          title: windowTitle,
          width: width,
          height: height
      }
    }
    Column {
      anchors.centerIn: parent
      spacing: 20
      Button {
          text: "Change Title"
          onClicked: {
            windowTitle = "Updated Title"
          }
      }
    }
}
</syntaxhighlight>
<br>
<syntaxhighlight lang="qml">
// MainWindow.qml
import QtQuick
import QtQuick.Window
import QtQuick.Controls
Window {
    id:      mainWindow
    width:  640
    height:  480
    visible: true
    title:  qsTr("Main Window")
    Column {
      anchors.centerIn: parent
      spacing: 20
      Button {
          text: "Create Dynamic Window"
          onClicked: {
            var component = Qt.createComponent("DynamicWindow.qml");
            if (component.status === Component.Ready) {
                var dynamicWindow = component.createObject(mainWindow, {"windowTitle": "New Dynamic Window"});
                // メソッドの実行および戻り値の取得
                var windowInfo = dynamicWindow.getWindowInfo();
                console.log("Window Info:", JSON.stringify(windowInfo));
                infoText.text  = "Window Info: " + JSON.stringify(windowInfo);
            }
          }
      }
      Text {
          id: infoText
          text: "No window info yet"
       }
       }
     }
     }

案内メニュー