In QML, how to stop children from inheriting parent properties like opacity?

[Mizmas]

I'm used to Qt widgets, and when you specify their properties with QSS, parent properties don't override the children properties, why isn't it the same in QML?

For example, I want the parent and the child to have a different opacity value, but the parent's opacity overrides the child's opacity:

Image {
                id: knightBackground
                opacity: 0
                visible: true
                source: "assets/knight background.png"
                fillMode: Image.PreserveAspectFit

                Image {
                    id: knightButton
                    opacity: 1
                    x: 4
                    y: 3
                    source: "assets/Knight Button.png"
                    fillMode: Image.PreserveAspectFit
                }
            }

[jeremy_k]

The parent in this situation is acting as a visual parent. If it is rotated, translated, mirrored, etc, the child is altered in the same manner after the child's transformations.

Make the child a sibling instead if the goal is to not inherit opacity.

[Mizmas]

@jeremy_k the problem is that they can't be siblings because the knightBackground is in a column, so if they had the same parent, they would be side by side in the column.

I'm doing a side menu like this, and the knightBackground and knightButton have to be separate for giving hover and clicked events only to the background

[jeremy_k]

@Mizmas said in In QML, how to stop children from inheriting parent properties like opacity?:

@jeremy_k the problem is that they can't be siblings because the knightBackground is in a column, so if they had the same parent, they would be side by side in the column.

Think a bit ... laterally. Make them children of an Item, which will in turn be a child of the Column.

[Mizmas]

@jeremy_k Thanks it worked, I wish the Item type had a property to wrap around it's children though, I've tried using childrenRect.width with childrenRect.height for the parent Item's size, but it was a bit messy, at least in the Qt Design Studio.

[jeremy_k]

@Mizmas said in In QML, how to stop children from inheriting parent properties like opacity?:

@jeremy_k Thanks it worked, I wish the Item type had a property to wrap around it's children though, I've tried using childrenRect.width with childrenRect.height for the parent Item's size, but it was a bit messy, at least in the Qt Design Studio.

I'm not sure that I understand the issue. Are you saying that you want a single property to make the parent the same size as the children, rather than 2? I don't use design studio, but I don't see the a mess running the same code via creator.

Another option is to make the background the child of the piece, with a negative z.