"Invalid property assignment: "mouseArea2" is a read-only property"



  • I've started the QT tutorials, and am currently working on "Creating a Qt Quick Application". I reached the section titled "Adding Application Logic", and step 7 involves actually running the application, which resulted in the error message that is my subject line. Could someone explain to me what's wrong? I am, in particular, confused by the fact that only mouseArea2 triggers this message - all three mouse areas seem to be closely parallel, so I'd normally expect that if any one of them had a defect, all three would have that same defect.
    I would guess that the problem has to be in either main.qml or Page1Form.ui.qml. Here they are:
    mail.qml

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Tabs")
    
        SwipeView {
            id: swipeView
            anchors.fill: parent
            currentIndex: tabBar.currentIndex
    
            Page1Form {
                id: page
                mouseArea {
                onClicked: StateGroup.state = ' '
                }
                mouseArea1: {
                onClicked: StateGroup.state = 'State1'
                }
                mouseArea2: {
                onClicked: StateGroup.state = 'State2'
                }
            }
            StateGroup {
                id: stateGroup
                states: [
                    State {
                        name: "State1"
    
                        PropertyChanges {
                            target: page.icon
                            x: page.middleRightRect.x
                            y: page.middleRightRect.y
                        }
                    },
                    State {
                        name: "State2"
    
                        PropertyChanges {
                            target: page.icon
                            x: page.bottomLeftRect.x
                            y: page.bottomLeftRect.y
                        }
                    }
                ]
            }
            Page2Form {
            }
        }
    
        footer: TabBar {
            id: tabBar
            currentIndex: swipeView.currentIndex
    
            TabButton {
                text: qsTr("Page 1")
            }
            TabButton {
                text: qsTr("Page 2")
            }
        }
    }
    

    Page1Form.ui.qml:

    import QtQuick 2.9
    import QtQuick.Controls 2.2
    
    Page {
        id: page
        width: 600
        height: 400
        property alias page: page
        property alias icon: icon
        property alias mouseArea2: mouseArea2
        property alias bottomLeftRect: bottomLeftRect
        property alias mouseArea1: mouseArea1
        property alias middleRightRect: middleRightRect
        property alias mouseArea: mouseArea
        property alias topLeftRect: topLeftRect
    
        header: Label {
            text: qsTr("Page 1")
            font.pixelSize: Qt.application.font.pixelSize * 2
            padding: 10
        }
    
        Image {
            id: icon
            x: 10
            y: 20
            source: "qt-logo.png"
        }
    
    
        Rectangle {
            id: topLeftRect
            width: 80
            height: 80
            color: "#00000000"
            border.color: "#808080"
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.top: parent.top
            anchors.topMargin: 20
    
            MouseArea {
                id: mouseArea
                anchors.fill: parent
    
    
            }
        }
    
        Rectangle {
            id: middleRightRect
            x: 0
            y: 20
            width: 80
            height: 80
            color: "#00000000"
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            MouseArea {
                id: mouseArea1
                anchors.fill: parent
            }
            border.color: "#808080"
        }
    
        Rectangle {
            id: bottomLeftRect
            x: 20
            y: 120
            width: 80
            height: 80
            color: "#00000000"
            anchors.top: parent.bottom
            anchors.left: parent.left
            anchors.topMargin: 20
            border.color: "#808080"
            anchors.leftMargin: 10
    
            MouseArea {
                id: mouseArea2
                x: 0
                y: -358
                anchors.fill: parent
            }
        }
    }
    


  • you did mouseArea2: { instead of mouseArea2 {.

    The first one tries to affect anew value to the mouseArea2 property, while the second one is to access sub properties of the mouseArea2 property (it's named a grouped property).


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.