📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| (同じ利用者による、間の4版が非表示) | |||
| 128行目: | 128行目: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | |||
また、読み込んだカスタムQMLタイプがシグナルを送信してそれを呼び出し側が受信する場合、<code>Connections</code>タイプを<code>Loader</code>タイプの<code>item</code>プロパティと一緒に使用する必要がある。<br> | |||
また、読み込んだカスタムQMLタイプが破棄された場合、カスタムQMLタイプが再び生成されるまで、全てのシグナルハンドラは無視される。<br> | |||
<syntaxhighlight lang="qml"> | |||
// main.qmlファイル | |||
Loader { | |||
id: pageLoader | |||
source: "CustomQML.qml" | |||
} | |||
Connections { | |||
target: pageLoader.item | |||
// Qt 5.14以前の場合 | |||
onMessage: { | |||
pageLoader.source = "" | |||
} | |||
// Qt 5.15以降は、以下に示すシンタックスでも可能 | |||
function onMessage() | |||
{ | |||
pageLoader.source = "" | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
<syntaxhighlight lang="qml"> | |||
// CustomQML.qmlファイル | |||
import QtQuick 2.15 | |||
Rectangle { | |||
id: root | |||
width: 100 | |||
height: 100 | |||
signal message(string msg) | |||
MouseArea { | |||
anchors.fill: parent | |||
onClicked: { | |||
root.message("clicked!") | |||
} | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
==== Componentタイプを使用する場合 ==== | |||
Componentタイプは、複数のQMLオブジェクトをまとめてコンポーネント化して、再利用可能なオブジェクトとして部品化する。<br> | |||
<syntaxhighlight lang="qml"> | |||
Component { | |||
// ...略 | |||
<任意のカスタムQMLタイプ名 例. CustomItem> { | |||
// ...略 | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
<code>Component</code>タイプは、Itemタイプを継承していないため、<code>x</code>プロパティ、<code>y</code>プロパティ、<code>anchors</code>プロパティ、レイアウトの設定は使用できない。<br> | |||
レイアウトの設定が必要な場合、カスタムQMLタイプのプロパティを変更して、レイアウトを設定する必要がある。<br> | |||
<br> | |||
<code>Component</code>タイプ内に定義したカスタムQMLタイプをウインドウに表示する場合は、<code>Component</code>タイプを<code>Loader</code>タイプの<code>sourceComponent</code>プロパティに設定する。<br> | |||
また、<code>Loader</code>タイプの<code>sourceComponent</code>プロパティに<code>undefined</code>を指定することにより、読み込み済みのオブジェクトを削除することができる。<br> | |||
<br> | |||
以下の例では、カスタムQMLタイプ(CustomItem)をコンポーネント化したComponentタイプを読み込んで表示している。<br> | |||
<syntaxhighlight lang="qml"> | |||
import QtQuick 2.15 | |||
import QtQuick.Window 2.15 | |||
window { | |||
visible: true | |||
width: 640 | |||
height: 480 | |||
MouseArea { | |||
anchors.fill: parent | |||
onClicked: { | |||
componentLoader.sourceComponent = customComponent | |||
} | |||
} | |||
Loader { | |||
id: componentLoader | |||
} | |||
Component { | |||
id: customComponent | |||
CustomItem { | |||
id: customItem | |||
} | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
<code>Component</code>タイプの重要な機能として、<code>completed</code>と<code>destruction</code>という2つのアタッチドシグナルが存在する。<br> | |||
* completed | |||
*: インスタンスが生成された直後に送信される。 | |||
*: シグナルハンドラである<code>onCompleted</code>は、インスタンスの生存確認およびインスタンスの生成直後に何らかの処理が必要な場合に使用するため、使用頻度が高い。 | |||
* destruction | |||
*: インスタンスが削除された時に送信される。 | |||
<br> | <br> | ||
==== ComponentタイプのcreateObject関数を使用する場合 ==== | ==== ComponentタイプのcreateObject関数を使用する場合 ==== | ||
グローバル関数である<code>Qt.createComponent</code>関数を使用することにより、<code>Component</code>タイプのインスタンスを生成することができる。<br> | |||
このインスタンスから、<code>Component</code>タイプにある<code>createObject</code>関数を使用して、表示可能なインスタンスを動的に生成することができる。<br> | |||
<br> | |||
また、<code>createObject</code>関数の第2引数にカスタムQMLタイプに渡すプロパティを指定することにより、インスタンスの生成と同時にプロパティを設定することができる。<br> | |||
<br> | |||
以下の例では、<code>Qt.createComponent</code>関数と<code>createObject</code>関数を使用して、カスタムQMLタイプ(CustomItem)を動的に生成している。<br> | |||
<syntaxhighlight lang="qml"> | |||
import QtQuick 2.15 | |||
import QtQuick.Window 2.15 | |||
window { | |||
id: mainWindow | |||
visible: true | |||
width: 640 | |||
height: 480 | |||
Component.onCompleted { | |||
var component = Qt.createComponent("CustomItem.qml") | |||
component.createObject(mainWindow, {"anchors.fill": mainWindow}) | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
<code>Component</code>タイプは、<code>Loader</code>タイプと比較して手順が複雑であるが複数のインスタンスを生成できる等、<code>Loader</code>タイプには無いメリットが存在する。<br> | |||
<br><br> | <br><br> | ||