es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

QML comparte una instancia de un componente en diferentes páginas en un stackview.

28 Jul, 2023 Programación

En QML, tengo una instancia de un Componente (id: sharedComponent) que me gustaría usar en dos Page de QML que son gestionadas en un StackView. Sin embargo, el sharedComponent solo es visible cuando la page1 está activa en el StackView, es decir, el rectángulo azul desaparece tan pronto como se empuja la page2 en el StackView.

¿Cómo puedo compartir/usar/ver una instancia de un componente en múltiples páginas en QML?

MyPage.qml

Page {
    default property alias mainContent: mainContent.data

    Item {
        id: mainContent
        anchors.fill: parent
    }
}

main.qml

ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true

    Rectangle {
        id: sharedComponent
        anchors.fill: parent
        color: "blue"
        // en mi software real, este componente compartido contendría una Scene3D aquí
    }

    MyPage {
        id: page1
        mainContent: sharedComponent
    }
    MyPage {
        id: page2
        mainContent: sharedComponent
    }

    StackView {
        id: stackView
        initialItem: page1
        anchors.fill: parent
    }

    Button {
        text: "Cambiar página"
        anchors.centerIn: parent
        onClicked: {
            if(stackView.depth > 1) {
                stackView.pop()
            } else {
                stackView.push(page2)
            }
        }
    }
}
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para compartir una instancia de un componente en múltiples páginas en QML, se puede utilizar una técnica llamada creación dinámica de objetos. En lugar de utilizar un id para el componente compartido en main.qml, se puede crear de forma dinámica y añadirlo tanto a page1 como a page2.

    Aquí tienes un ejemplo de implementación:

    main.qml

    ApplicationWindow {
    id: window
    width: 640
    height: 480
    visible: true

    MyPage {
        id: page1
    }
    MyPage {
        id: page2
    }

    Component.onCompleted: {
        // crear componente compartido de forma dinámica
        var sharedComponent = Qt.createQmlObject("import QtQuick 2.15; Rectangle { color: 'blue'; anchors.fill: parent}", window)
        page1.mainContent = sharedComponent; // añadirlo a la página 1
        page2.mainContent = sharedComponent; // añadirlo a la página 2
    }

    StackView {
        id: stackView
        initialItem: page1
        anchors.fill: parent
    }

    Button {
        text: "Cambiar página"
        anchors.centerIn: parent
        onClicked: {
            if(stackView.depth > 1) {
                stackView.pop()
            } else {
                stackView.push(page2)
            }
        }
    }
}

    MyPage.qml sigue siendo igual:

    Page {
    default property alias mainContent: mainContent.data

    Item {
        id: mainContent
        anchors.fill: parent
    }
}

    En esta implementación, sharedComponent se crea dinámicamente usando Qt.createQmlObject(). Esta función toma dos argumentos: una cadena que representa el código QML del componente y un objeto padre al cual se añadirá el componente. En este caso, he asignado window como objeto padre, pero puedes utilizar cualquier objeto padre que sea apropiado para tu caso de uso.

    Una vez creado sharedComponent, se asigna a la propiedad mainContent tanto de page1 como de page2. Esto significa que ambas páginas compartirán la misma instancia de sharedComponent y será visible en ambas páginas, independientemente de cuál esté activa en el StackView.

Comments are closed.