QML オブジェクトを使いまわしたい

Question

前提・実現したいこと

いつもお世話になっております。
レイアウト中にオブジェクトを使い回せないか検討しています。

現在カメラの表示を行っており、その表示する結果を様々なところで流用したいと考えています。

イメージとしては、SwipeViewの中にページが３つあって、それぞれでカメラの映像するといったものです。

SwipeView {
    anchors.fill: parent

    Page {
        // ここに cameraViewを置きたい
    }
    Page {
        // ここに cameraViewを置きたい
    }
　　Page{
        cameraView { // イメージ
            width: parent.width / 2; height: parent.height / 2
            x: 0; y: 0;
        }
        cameraView {
            width: parent.width / 2; height: parent.height / 2
            x: 0; y: 0;
        }
    }
}
// 使いまわしたいオブジェクト
Rectangle {
    id: cameraView

    Camera {
        // 省略
    }
    VideoOutput　{
        // 省略
    }
}

発生している問題・エラーメッセージ

Pageとして作成したものをStackViewに入れ、それを２画面同時表示などを行うとスワイプして戻った場合にそのレイアウトが消えてしまう。
また、GoogleやQtの公式サイトで検索したいがどのように調べればよいかわからなかった。
（「Qml レイアウト　使いまわし」などで検索）

試したこと

Page として作成しておけばSwipeViewやStackViewなどで何度も使用することができるのは確認しました。
しかし、２画面表示などを行う際にはページ単位で持つのは難しいと思い、Rectangle または Itemとして扱えないかと考えています。

補足情報（FW/ツールのバージョンなど）

Qt 5.10.1
Qt Creator 4.5.1

Answer 1

下記の方法で解決することが出来ました。

RectangleではなくItemで扱い、StackViewで保持する方法で実装することが出来ました。

SwipeView {
    anchors.fill: parent

    onCurrentIndexChanged: {
        sv_page1.clear(null); // これでStackView内全削除
        sv_page2.clear(null);
        sv_page3.clear(null);

        // 表示されているViewのみに表示
        switch (currentIndex) {
            case 0:
                sv_page1.push(cameraView);
                break;
            case 2:
                sv_page2.push(cameraView);
                break;
            case 3:
                sv_page3.push(cameraView);
                break;
        }
    }

    StackView{
        id: sv_page1
    }
    StackView{
        id: sv_page2
    }
    Page{
        StackView{
            id: sv_page3
        }
        StackView {
            // 別のオブジェクトをここで使う
        }
    }
}
// 使いまわしたいオブジェクト
Item {
    id: cameraView

    Camera {
        // 省略
    }
    VideoOutput　{
        // 省略
    }
}

Answer 2

表示のコピーで良いのであれば、ちょっとトリッキーですが、 ShaderEffectSource を利用するという手があります。この場合、表示以外の機能は各 Page で実装する形になります。

import QtQuick 2.12
import QtQuick.Controls 2.5

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Tabs")

    Rectangle {
        id: content
        anchors.fill: parent
        color: 'red'
    }

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Repeater {
            model: 5
            Page {
                ShaderEffectSource {
                    anchors.fill: parent
                    sourceItem: content
                    hideSource: true
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: console.debug('page %1 clicked'.arg(model.index))
                }
            }
        }
    }

    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex

        Repeater {
            model: 5
            TabButton {
                text: qsTr('Page %1'.arg(model.index))
            }
        }
    }
}