QMLの基礎 - カスタムQMLタイプ

概要

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

カスタムQMLタイプは、コンポーネントと呼ぶこともある。
コンポーネントとは、複数のQMLタイプをまとめて1つのQMLタイプとして扱う仕組みである。

カスタムQMLタイプ以外にも、Componentタイプを使用してコンポーネントを作成することができる。

カスタムQMLタイプの作成

1. Qt Creatorを起動して、[ファイル]メニューバー - [New File...]を選択する。
2. 次に、[New File]ダイアログの左ペインにある[Qt] - 右ペインにある[QMLファイル(Qt Quick 2)]を選択する。
3. 作成するQMLファイル名を入力して、[次へ]ボタンを押下する。
4. [プロジェクト管理]画面にある[完了]ボタンを押下する。

QMLファイル名には、英数字や_(アンダーバー)が使用できる。
ただし、ファイル名の1文字目は大文字のアルファベットで始まる必要がある。

もし、カスタムQMLファイルがQtプロジェクトのトップディレクトリと異なるディレクトリに存在する場合、該当ディレクトリをimportする必要がある。

 import "<カスタムQMLファイルが存在するディレクトリの相対パスまたは絶対パス>"

カスタムQMLファイルがQtプロジェクトのトップディレクトリに存在する場合は省略できる。

カスタムQMLタイプの例

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

 // 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"
    }
 }

 // 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
       }
    }
 }

コンポーネントの作成

まず、カスタムQMLタイプを作成する。

1. Qt Creatorを起動して、[ファイル]メニューバー - [New File...]を選択する。
2. 次に、[New File]ダイアログの左ペインにある[Qt] - 右ペインにある[QMLファイル(Qt Quick 2)]を選択する。
3. 作成するQMLファイル名を入力して、[次へ]ボタンを押下する。
4. [プロジェクト管理]画面にある[完了]ボタンを押下する。

カスタムQMLファイル名には、英数字や_(アンダーバー)が使用できる。
ただし、ファイル名の1文字目は大文字のアルファベットで始まる必要がある。

コンポーネントは、以下に示すいずれかの手順により、オブジェクトを動的に生成することができる。

• Loaderタイプを使用する。
• ComponentタイプのcreateObject関数を使用する。

オブジェクトを必要に応じて生成する場合、または、パフォーマンス性からオブジェクトを不必要に削除したくない場合等に使用する。

コンポーネントの例

Loaderタイプを使用する場合

Loaderタイプは、カスタムQMLファイルを読み込み、オブジェクトを動的に生成することができる。
カスタムQMLファイルのオブジェクトを生成するには、sourceプロパティにカスタムQMLファイルのパスを指定する。

生成したオブジェクトを削除する場合は、sourceプロパティを空に指定する。

LoaderタイプはItemタイプを継承しているため、xプロパティ、yプロパティ、anchorsプロパティを使用して、
動的に生成したカスタムQMLファイルのオブジェクトのレイアウトを設定することができる。
デフォルトのxプロパティおよびyプロパティの値は、0であるため、そのオブジェクトは左上に表示される。

 // main.qmlファイル
 
 import QtQuick 2.15
 import QtQuick.Window 2.15
 
 Window {
    visible: true
    width: 640
    height: 480
 
    MouseArea {
       anchors.fill: parent
       function onClicked() {
          pageLoader.source = "CustomItem.qml"
       }
    }
 
    Loader {
       id: pageLoader
    }
 }