QMLの基礎 - カスタムQMLタイプ - 版の履歴

Wiki: /* Loaderタイプを使用する場合 */

2023-01-11T04:52:21Z

Loaderタイプを使用する場合

← 古い版		2023年1月11日 (水) 13:52時点における版
129行目:		129行目:
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>
	~~また、読み込んだカスタムQMLタイプがシグナルを送信してそれを受信する場合、~~<code>Connections</code>タイプを<code>Loader</code>タイプの<code>item</code>プロパティと一緒に使用する必要がある。<br>		また、読み込んだカスタムQMLタイプがシグナルを送信してそれを呼び出し側が受信する場合、<code>Connections</code>タイプを<code>Loader</code>タイプの<code>item</code>プロパティと一緒に使用する必要がある。<br>
	<syntaxhighlight lang="qml">		また、読み込んだカスタムQMLタイプが破棄された場合、カスタムQMLタイプが再び生成されるまで、全てのシグナルハンドラは無視される。<br>
			<syntaxhighlight lang="qml">
			// main.qmlファイル

	Loader {		Loader {
	id: pageLoader		id: pageLoader
140行目:		143行目:

	// Qt 5.14以前の場合		// Qt 5.14以前の場合
	~~onBackPagePressed~~: {		onMessage: {
	pageLoader.source = ""		pageLoader.source = ""
	}		}

	// Qt 5.~~15以降の場合~~		// Qt 5.15以降は、以下に示すシンタックスでも可能
	function ~~onBackPagePressed~~()		function onMessage()
	{		{
	pageLoader.source = ""		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!")
			}
	}		}
	}		}

Wiki: /* Loaderタイプを使用する場合 */

2023-01-11T04:40:55Z

Loaderタイプを使用する場合

← 古い版		2023年1月11日 (水) 13:40時点における版
129行目:		129行目:
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>
	~~また、読み込んだカスタムQMLタイプのスロットを受信する場合、~~<code>Connections</code>タイプを<code>Loader</code>タイプの<code>item</code>プロパティと一緒に使用する必要がある。<br>		また、読み込んだカスタムQMLタイプがシグナルを送信してそれを受信する場合、<code>Connections</code>タイプを<code>Loader</code>タイプの<code>item</code>プロパティと一緒に使用する必要がある。<br>
	<syntaxhighlight lang="qml">		<syntaxhighlight lang="qml">
	Loader {		Loader {
	id: pageLoader		id: pageLoader

Wiki: /* Loaderタイプを使用する場合 */

2023-01-11T04:38:59Z

Loaderタイプを使用する場合

@@ 129行目: / 129行目: @@
   </syntaxhighlight>
 <br>
 ==== Componentタイプを使用する場合 ====
 Componentタイプは、複数のQMLオブジェクトをまとめてコンポーネント化して、再利用可能なオブジェクトとして部品化する。<br>

Wiki: /* コンポーネントの例 */

2022-12-27T17:12:35Z

コンポーネントの例

@@ 128行目: / 128行目: @@
+  }
   </syntaxhighlight>
 <br>
 ==== ComponentタイプのcreateObject関数を使用する場合 ====
+グローバル関数である<code>Qt.createComponent</code>関数を使用することにより、<code>Component</code>タイプのインスタンスを生成することができる。<br>
 <br><br>

Wiki: /* ComponentタイプのcreateObject関数を使用する場合 */

2022-12-27T16:50:05Z

ComponentタイプのcreateObject関数を使用する場合

← 古い版		2022年12月28日 (水) 01:50時点における版
130行目:		130行目:
	<br>		<br>
	==== ComponentタイプのcreateObject関数を使用する場合 ====		==== ComponentタイプのcreateObject関数を使用する場合 ====

	<br><br>		<br><br>

Wiki: /* createObject関数を使用する場合 */

2022-12-27T11:39:59Z

createObject関数を使用する場合

← 古い版		2022年12月27日 (火) 20:39時点における版
129行目:		129行目:
	</syntaxhighlight>		</syntaxhighlight>
	<br>		<br>
	==== ~~createObject関数を使用する場合~~ ====		==== ComponentタイプのcreateObject関数を使用する場合 ====
	<br><br>		<br><br>

Wiki: /* コンポーネントの例 */

2022-12-24T16:21:04Z

コンポーネントの例

@@ 132行目: / 132行目: @@
 <br><br>
 __FORCETOC__
 [[カテゴリ:Qt]]

Wiki: /* カスタムQMLタイプの例 */

2022-12-24T13:01:49Z

カスタムQMLタイプの例

@@ 77行目: / 77行目: @@
   </syntaxhighlight>
 <br><br>
 __FORCETOC__
 [[カテゴリ:Qt]]

Wiki: /* サンプルコード 1 */

2022-12-24T12:16:44Z

サンプルコード 1

← 古い版		2022年12月24日 (土) 21:16時点における版
25行目:		25行目:
	<br><br>		<br><br>

	== ~~サンプルコード 1~~ ==		== カスタムQMLタイプの例 ==
	以下の例では、押下するたびに乱数を発生させて、テキストに乱数値を表示するカスタムQMLタイプを作成および使用している。<br>		以下の例では、押下するたびに乱数を発生させて、テキストに乱数値を表示するカスタムQMLタイプを作成および使用している。<br>
	なお、カスタムQMLファイル名は"CustomItem.qml"として、Qtプロジェクトのトップディレクトリに配置している。<br>		なお、カスタムQMLファイル名は"CustomItem.qml"として、Qtプロジェクトのトップディレクトリに配置している。<br>

Wiki: /* 概要 */

2022-12-24T12:16:19Z

概要

← 古い版		2022年12月24日 (土) 21:16時点における版
1行目:		1行目:
	== 概要 ==		== 概要 ==
	設計者は、既存のQMLタイプを使用して、独自の機能を追加したカスタムQMLタイプを作成することができる。<br>		設計者は、既存のQMLタイプを使用して、独自の機能を追加したカスタムQMLタイプを作成することができる。<br>
			<br>
			カスタムQMLタイプは、コンポーネントと呼ぶこともある。<br>
			コンポーネントとは、複数のQMLタイプをまとめて1つのQMLタイプとして扱う仕組みである。<br>
			<br>
			カスタムQMLタイプ以外にも、Componentタイプを使用してコンポーネントを作成することができる。<br>
	<br><br>		<br><br>

Wiki: ページの作成:「== 概要 == 設計者は、既存のQMLタイプを使用して、独自の機能を追加したカスタムQMLタイプを作成することができる。

== カスタムQMLタイプの作成 == # Qt Creatorを起動して、[ファイル]メニューバー - [New File...]を選択する。 # 次に、[New File]ダイアログの左ペインにある[Qt] - 右ペインにある[QMLファイル(Qt Quick 2)]を選択する。 # 作成するQMLファ…」

2022-12-24T12:04:08Z

ページの作成:「== 概要 == 設計者は、既存のQMLタイプを使用して、独自の機能を追加したカスタムQMLタイプを作成することができる。 == カスタムQMLタイプの作成 == # Qt Creatorを起動して、[ファイル]メニューバー - [New File...]を選択する。 # 次に、[New File]ダイアログの左ペインにある[Qt] - 右ペインにある[QMLファイル(Qt Quick 2)]を選択する。 # 作成するQMLファ…」

新規ページ

== 概要 ==
設計者は、既存のQMLタイプを使用して、独自の機能を追加したカスタムQMLタイプを作成することができる。 
 

== カスタムQMLタイプの作成 ==
# Qt Creatorを起動して、[ファイル]メニューバー - [New File...]を選択する。
# 次に、[New File]ダイアログの左ペインにある[Qt] - 右ペインにある[QMLファイル(Qt Quick 2)]を選択する。
# 作成するQMLファイル名を入力して、[次へ]ボタンを押下する。
# [プロジェクト管理]画面にある[完了]ボタンを押下する。
 
QMLファイル名には、英数字や<code>_</code>(アンダーバー)が使用できる。 
ただし、ファイル名の1文字目は大文字のアルファベットで始まる必要がある。 
 
もし、カスタムQMLファイルがQtプロジェクトのトップディレクトリと異なるディレクトリに存在する場合、該当ディレクトリを<code>import</code>する必要がある。 
<syntaxhighlight lang="qml">
import "<カスタムQMLファイルが存在するディレクトリの相対パスまたは絶対パス>"
</syntaxhighlight>
 
カスタムQMLファイルがQtプロジェクトのトップディレクトリに存在する場合は省略できる。 
 

== サンプルコード 1 ==
以下の例では、押下するたびに乱数を発生させて、テキストに乱数値を表示するカスタムQMLタイプを作成および使用している。 
なお、カスタムQMLファイル名は"CustomItem.qml"として、Qtプロジェクトのトップディレクトリに配置している。 
<syntaxhighlight lang="qml">
// CustomItem.qmlファイル

import QtQuick 2.15
import QtQuick.Controls 2.15

Row {
Button {
id: btn
text: "Click"
function onClicked() {
textvalue.text = Math.random()
}
}

Text {
id: textvalue
text: "0"
}
}
</syntaxhighlight>
 
<syntaxhighlight lang="qml">
// main.qmlファイル

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
visible: true
width: 640
height: 480

Column {
CustomItem {
height: 50
}

CustomItem {
height: 50
}

CustomItem {
height: 50
}
}
}
</syntaxhighlight>
 

__FORCETOC__
[[カテゴリ:Qt]]