12,925
回編集
「QMLの基礎 - ウインドウ」の版間の差分
ナビゲーションに移動
検索に移動
→静的宣言方式
(→静的宣言方式) |
|||
| 16行目: | 16行目: | ||
以下の例では、静的宣言方式を使用して、ウインドウ間の表示・非表示をスイッチングしている。<br> | 以下の例では、静的宣言方式を使用して、ウインドウ間の表示・非表示をスイッチングしている。<br> | ||
<br> | <br> | ||
* | * メインウインドウ | ||
*: 2つのボタンがあり、各ボタンを押下する時、メインウインドウが非表示になりサブウインドウが開く。 | *: 2つのボタンがあり、各ボタンを押下する時、メインウインドウが非表示になりサブウインドウが開く。 | ||
*: 各サブウィンドウのボタンを押下する時、サブウインドウを閉じて、メインウインドウが再度表示される。 | *: 各サブウィンドウのボタンを押下する時、サブウインドウを閉じて、メインウインドウが再度表示される。 | ||
| 29行目: | 29行目: | ||
onCloseThisWindow: { | onCloseThisWindow: { | ||
// | // ...略 | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| 42行目: | 42行目: | ||
Window { | Window { | ||
id: anotherWindow | id: anotherWindow | ||
width:480 | width: 480 | ||
height:320 | height: 320 | ||
// シグナルは、サブウインドウの関数として呼び出す | // シグナルは、サブウインドウの関数として呼び出す | ||
| 71行目: | 71行目: | ||
ApplicationWindow { | ApplicationWindow { | ||
id: mainWindow | id: mainWindow | ||
width: 640 | width: 640 | ||
height: 480 | height: 480 | ||
title: qsTr("Switching between windows in QML") | title: qsTr("Switching between windows in QML") | ||
| 148行目: | 148行目: | ||
secondWindow.close() // We close the second window | secondWindow.close() // We close the second window | ||
mainWindow.show() // Shows the main window | mainWindow.show() // Shows the main window | ||
} | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
==== 動的生成方式 ==== | |||
動的生成方式は、<code>Qt.createComponent</code>メソッドおよび<code>Component.createObject</code>メソッドを使用して、動的にコンポーネントおよびオブジェクトを生成する方法である。 | |||
<br> | |||
動的生成方式の特徴を以下に示す。<br> | |||
* 柔軟性が高い。 | |||
* 実行時にコンポーネントを生成できる。 | |||
* メモリ使用を最適化できる。(必要な時にのみオブジェクトを生成) | |||
* ソースコードが複雑になる可能性がある。 | |||
<br> | |||
動的生成方法でコンポーネントに引数を渡す場合は、コンポーネントにプロパティを定義して、それらのプロパティに値を渡すことで行う。<br> | |||
<br> | |||
<syntaxhighlight lang="qml"> | |||
var component = Qt.createComponent("<QMLファイル名>"); | |||
var window = component.createObject(<親コンポーネントのID>, | |||
// 各プロパティの設定 | |||
{ "生成するコンポーネントのプロパティ名 1": "値", | |||
"生成するコンポーネントのプロパティ名 2": "値", | |||
"生成するコンポーネントのプロパティ名 3": "値" | |||
} | |||
); | |||
</syntaxhighlight> | |||
<br> | |||
<syntaxhighlight lang="qml"> | |||
// SecondWindow.qml | |||
import QtQuick | |||
import QtQuick.Window | |||
import QtQuick.Controls | |||
ApplicationWindow { | |||
id: secondWindow | |||
width: 400 | |||
height: 300 | |||
visible: true | |||
property string windowTitle: "Default Title" | |||
property color backgroundColor: "white" | |||
property string message: "Default message" | |||
title: windowTitle | |||
color: backgroundColor | |||
Column { | |||
anchors.centerIn: parent | |||
spacing: 20 | |||
Label { | |||
text: message | |||
font.pixelSize: 16 | |||
} | |||
Button { | |||
text: "Debug Button" | |||
onClicked: { | |||
console.log("Debug button clicked in Second Window") | |||
console.log("Window Title:", windowTitle) | |||
console.log("Background Color:", backgroundColor) | |||
console.log("Message:", message) | |||
} | |||
} | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
<syntaxhighlight lang="qml"> | |||
// MainWindow.qml | |||
import QtQuick | |||
import QtQuick.Window | |||
import QtQuick.Controls | |||
ApplicationWindow { | |||
id: mainWindow | |||
width: 640 | |||
height: 480 | |||
visible: true | |||
title: qsTr("Main Window") | |||
Button { | |||
anchors.centerIn: parent | |||
text: "Open Second Window" | |||
onClicked: { | |||
var component = Qt.createComponent("SecondWindow.qml"); | |||
var window = component.createObject(mainWindow, { | |||
"windowTitle": "Custom Title", | |||
"backgroundColor": "lightblue", | |||
"message": "Hello from Main Window!" | |||
}); | |||
window.show(); | |||
} | } | ||
} | } | ||