qml properties not working?
I have created a qml widget based on rectangles. The widget also has several smaller rectangles inside of it. I use this widget in several views and I want to define a property (or use some other method) to change the border size of one of the smaller rectanges depending on where the widget is used. Below is how I thought this would work, but it doesn't work for me, the border size is always zero. What's going on here?
Rectangle { property real pageNum: -1 //some other stuff Rectangle { id: first //other stuff border.width: parent.pageNum==0 ? 4:0 } Rectangle { id: second //other stuff border.width: parent.pageNum==1 ? 4 : 0 } }
When I create the object in a page, I'll set the pageNum property like this:
MyWidget { id: thisWidget pageNum: 0 }
- dheerendra
Issue is overlapping rectangles in your MyWidget. Since you r setting the pageNum=0, first rectangle has border. Second rectangle overlaps the first rectangle. So u feel nothing. Have tried setting the pageNum=1 ?
They're not overlapping; I cut out alot of detail to avoid adding too much clutter in the code sample. There are anchors to make sure they line up next to each other. They also have an icon (Image) and a mouse area. Before adding the pageNum property, I successfully set it to change the border size when the mouse area is clicked, so I have seen the border light up the way I want. I just can't get it to respond to the pageNum property.
- Marco Pellin
@kgregory
It works for me. This is my code, check it, maybe you will be able to spot your issue.
main.qml
import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.3 ApplicationWindow { visible: true width: 640 height: 480 title: qsTr("Hello World") MyWidget { id: thisWidget pageNum: 0 } }
MyWidget.qml
import QtQuick 2.0 Rectangle { property real pageNum: -1 //some other stuff Rectangle { id: first //other stuff height: 200 width: 200 color: "blue" border.color: "black" border.width: parent.pageNum==0 ? 4 : 0 } Rectangle { id: second //other stuff height: 200 width: 200 anchors.left: first.right color: "green" border.color: "black" border.width: parent.pageNum==1 ? 4 : 0 } }
I can't find any material difference between what you have and what I have.
I'm using loader and I'm wondering if there could be some interaction between the copies of these objects on the other pages. I tried giving it a different id, but that didn't help.
OK, after fiddling around some more, I'm almost certain that the problem has to do with the Loader. I've noticed some objects don't get cleared when I switch pages, so I'm guessing that sometimes the menu object that I see (myWidget) is actually a copy from another page.
Is there a better way to implement different views? If not, I'll have to read up more on the loader object to try to get to the bottom of this.