qml中の共通部分をまとめたい。

Question

現在私はQt Quickを用いて
スライドインアニメーションを実装しようとしており、
このサイトを参考に下記コード1,2,3のように書いてみて
狙い通りの挙動(下記本コードの挙動を参照)で動いたのですが
コード2とコード3の内容がLabelエレメント以外ほぼ同じなので
共通の部分のみほかのファイルに記載してコードの量を減らしたいのですが
どのようなqmlエレメントを使えば抽象化のような事ができるのでしょうか。

ご回答よろしくお願いいたします。

備考
下記3つのファイルはすべて同じフォルダに配置して下さい。

コード1: 基底ウィンドウを記したmain.qml

import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 2.15

Window{
	visible: true
	title: qsTr("Qt Quick")
	id: root

	width: 500
	height: 400

	SubWindow_1{
		id: window1
		state: "element_show"
	}

	SubWindow_2{
		id: window2
	}

	MouseArea{
		anchors.fill: parent

		onClicked:{
			if(window1.is_show()){
				window1.hide()
				window2.show()
			}else{
				window1.show()
				window2.hide()
			}
		}
	}
}

コード2: 1つ目のサブウィンドウを記したSubWindow_1.qml

import QtQuick 2.9
import QtQuick.Controls 2.15

Rectangle{
    /*--------------------
        その他プロパティ
    *///------------------
    id: window1
    color: "white"
    border.width: 5
    state: "element_hide"
    width: parent.width
    height: parent.height
    
    /*------------------
        描画する内容
    *///----------------
    Label{
        id: label
        text: qsTr("サブウィンドウ_1")
                            
        horizontalAlignment: Qt.AlignHCenter
        verticalAlignment: Qt.AlignVCenter 
                            
        fontSizeMode: Text.Fit
        minimumPointSize: 1
        font.pointSize: 1000
        width: parent.width
        height: parent.height
    }
        
    /*--------------
        状態定義
    *///------------
    states:[
        State{
            name: "element_hide"
            PropertyChanges{target: window1; x: window1.width; y: 0}
        },
                
        State{
            name: "element_show" 
            PropertyChanges{target: window1; x: 0; y: 0}
        }
    ]

    /*------------------------
        アニメーション定義
    *///----------------------
    transitions:[
        Transition{
            to: "element_hide"
            NumberAnimation{properties: "x,y"; easing.type: Easing.InOutQuad; duration: 250}
        },
                
        Transition{
            to: "element_show"     
            NumberAnimation{properties: "x,y"; easing.type: Easing.InOutQuad; duration: 250}
        }
    ]
    
    /*--------------
        関数定義
    *///------------
    function hide(){
        window1.state = "element_hide"
    }
    
    function show(){
        window1.state = "element_show"
    }
    
    function is_show(){
        return window1.state === "element_show"
    }
}

コード3: 2つ目のサブウィンドウを記したSubWindow_2.qml

import QtQuick 2.9
import QtQuick.Controls 2.15

Rectangle{
    /*--------------------
        その他プロパティ
    *///------------------
    id: window2
    color: "white"
    border.width: 5
    state: "element_hide"
    width: parent.width
    height: parent.height
    
    /*------------------
        描画する内容
    *///----------------
    Label{
        id: label
        text: qsTr("サブウィンドウ_2")
                            
        horizontalAlignment: Qt.AlignHCenter
        verticalAlignment: Qt.AlignVCenter 
                            
        fontSizeMode: Text.Fit
        minimumPointSize: 1
        font.pointSize: 1000
        width: parent.width
        height: parent.height
    }
        
    /*--------------
        状態定義
    *///------------
    states:[
        State{
            name: "element_hide"
            PropertyChanges{target: window2; x: window2.width; y: 0}
        },
                
        State{
            name: "element_show" 
            PropertyChanges{target: window2; x: 0; y: 0}
        }
    ]

    /*------------------------
        アニメーション定義
    *///----------------------
    transitions:[
        Transition{
            to: "element_hide"
            NumberAnimation{properties: "x,y"; easing.type: Easing.InOutQuad; duration: 250}
        },
                
        Transition{
            to: "element_show"     
            NumberAnimation{properties: "x,y"; easing.type: Easing.InOutQuad; duration: 250}
        }
    ]
    
    /*--------------
        関数定義
    *///------------
    function hide(){
        window2.state = "element_hide"
    }
    
    function show(){
        window2.state = "element_show"
    }
    
    function is_show(){
        return window2.state === "element_show"
    }
}

本コードの挙動

サブウィンドウ1とサブウィンドウ2があり
画面クリックでそれぞれが入れ替わる。

開発環境の備考

ソフトウェア名	種類	バージョン	備考
Windows10 HOME	OS	20H2	特になし
GNU G++	C++用コンパイラ	8.1.0	Qt(oss版) オンラインインストーラよりインストール
Ninja	ビルドツール	1.10.0	Qt(oss版) オンラインインストーラよりインストール
CMake	メタビルドツール	3.19.2	Qt(oss版) オンラインインストーラよりインストール
Qt	ライブラリ	6.0.3	Qt(oss版) オンラインインストーラよりインストール

Answer 1

teamikl さんの回答のように、共通部分を SubWindow.qml というファイルに実装することで、
SubWindow というエレメントして扱うことができるので、共通の機能を SubWindow に実装して、それを外（もしくは派生エレメント）から変更するのが普通かなと思います。

質問の内容自体とは少し離れますが、実現したいことを察するに
Qt Quick Controls 2 というモジュールに含まれる StackView エレメントの利用も視野にいれるのがいいかなと思います。
https://doc.qt.io/qt-6/qml-qtquick-controls2-stackview.html

Comments

[退会済みユーザー]

tasuku.さん

StackViewに関して初耳だったので少し調べてみてとても便利そうだったので
ウィンドウごとに違うファイルに記載して行き、
main.qml内でStackViewを使用してそれらウィンドウを
呼び出す、という方針で進めて行こうと思います。

あと回答依頼にお答えいただきとても光栄に感じております。
ご回答誠にありがとうございました。

Answer 2

どのようなqmlエレメントを使えば抽象化のような事ができるのでしょうか。

プロパティにすることで、外部・利用側で差分を記述できます。

ラベルのみプロパティにした例。

// main.qml (差分のみ)

    SubWindow {
        id: window1
        state: "element_show"

        title: "サブウィンドウ_1"
    }

    SubWindow {
        id: window2
        title: "サブウィンドウ_2"
    }

// SubWindow.qml (差分のみ)

    property string title: "サブウィンドウ"


    // 描画する内容
    Label {
        id: label
        text: title

        ...
    }

関数定義～の部分の違いは、ID 部分が違うのみなので
同じ関数をそのまま使えます。

id は、そのファイル内でのみ有効な識別子なので、
SubWindow.qml 内でのid の区別は必要ありません。

Comments

[退会済みユーザー]

teamikiさん

> プロパティにすることで、外部・利用側で差分を記述できます
サンプルコードまでつけていただきありがとうございます。
テキストや数値などのみ変更できるようにしたいのならこちらのほうが
シンプルに記述できそうですが内部で扱うカスタムエレメント
を変更できるように作りたい場合
tasuku.さんが提案してくださった
StackViewエレメントのほうが有効そうだなと感じたので
そちらの方法を使う方針で進めていこうと思います。

> SubWindow.qml 内でのid の区別は必要ありません。
stateはRectangle内で使うプロパティなので同じステート内
の関数ではidで区別しなくてよいというわけですね
気づきませんでした...

ご回答誠にありがとうございました。