qml properties not working?

kgregory

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 ?

kgregory

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
    }
}

kgregory

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.

kgregory

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.