Solved "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.qmlimport 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 ofmouseArea2 {
.The first one tries to affect anew value to the
mouseArea2
property, while the second one is to access sub properties of themouseArea2
property (it's named a grouped property).