Qt - change property from a component in a different qml file

Question

Update 1

The idea is to be able to change the front and back of CardForm from main.qml because i want to be able to use multiple CardForm instances. I tried to do what they did here but it doesnt work.

Here is the code:

CardForm.qml

import QtQuick 2.0

Flipable {
    id: sCard
    width: 75
    height: 200

    property bool flipped: false
    property string front: "Front"
    property string back: "Back"

    property alias callFront : front
    property alias callBack : back

    front: Rectangle{
        id: front
        anchors.fill: sCard
        border.width: 2
        border.color: "black"
        radius: 5
        Text{
            anchors.centerIn: parent
            text: sCard.front
        }
    }

    back: Column{
        Rectangle{
            id: back
            anchors.fill: sCard
            radius: 5
            border.width: 2
            border.color: "black"
            Text{
                anchors.centerIn: parent
                text: sCard.front
            }
            Text{
                anchors.centerIn: parent
                text: sCard.front
            }
        }
    }

    transform: Rotation{
        id: flip
        origin.x: sCard.width
        origin.y: sCard.height/2
        axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
        angle: 0    // the default angle
    }

    states: State {
        name: "back"
        PropertyChanges {
            target: flip
            angle: 180
        }
        when: sCard.flipped
    }

    transitions: Transition{
        NumberAnimation {
            target: flip
            property: "angle"
            duration: 200
        }
    }

    MouseArea{
        anchors.fill: parent
        onClicked: sCard.flipped = !sCard.flipped
    }
}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

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

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

        Column {
            CardForm{
                id: test
                anchors.centerIn: parent
                test.callFront: "Hello World!"
                test.callBack: "Bonjour le Monde!
            }
        }
    }
}

Here are the error messages:

SHGetSpecialFolderPath() failed for standard location "Shared Configuration", clsid=0x1c. ()

qrc:/main.qml:17:13: QML CardForm: back is a write-once property

qrc:/main.qml:17:13: QML CardForm: front is a write-once property

qrc:/main.qml:16:9: QML Column: Cannot specify top, bottom, verticalCenter, fill or centerIn anchors for items inside Column. Column will not function.

the c1.getFront() and getBack() were from a C++ class that I made. I changed these to "Hello World!" and "Bonjour le Monde!"

Ugh... There is a lot. Try to explain again, what exactly you were trying to achieve. It all starts with line 9 and 10 in your CardForm where you try to overwrite the properties of the Flipable, but it is unlikely the end of the story. Please also include all error messages. — derM
c1 appears to be undefined where you reference it in main.qml — selbie
You try to assign something to a readonly property (property alias callFront : front creates a readonly access to the object with id front) — derM
This code is broken in so many places, that I don't see where to start. You should restart almost from the beginning, take baby-steps and try out your code whenever you change something. If you then find some problems you can't solve, you might ask again. If you do, please add the error-messages. — derM
To give you a great answer, it might help us if you have a glance at How to Ask if you haven't already. It might be also useful if you could provide a minimal reproducible example. — Mat

Rene Rene · Accepted Answer · 2016-11-22T19:34:17

So after many hours of struggling I figured out that to create a property which is accessible by other .qml files you must create a property alias name: id.property. The id must point towards an existing instance of a object in your code and the property of this instance that you wish to be able to change from the outside. So in my case it would be like so:

CardForm.qml

Flipable {
    id: sCard
    width: 75
    height: 200

    property bool flipped: false
    property alias frontText : front.text

    front: Rectangle{
        id: front
        anchors.fill: sCard
        border.width: 2
        border.color: "black"
        radius: 5
        Text{
            anchors.centerIn: parent
            text: frontText
        }
    }
}

and in the main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

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

        Rectangle {
            anchors.fill: parent
            CardForm{
                id: test
                anchors.centerIn: parent
                frontText: "Hello World!"
            }
        }
    }
}

Qt - change property from a component in a different qml file

1 Answers