QML ListView greys out or removes text of element when adjacent element is selected

Question

So in testing my program, I discovered the strangest thing.

So, I have a ListView element with a custom C++ model, and a fairly simple delegate. Each delegate is a MyButton class, which is simply a Text class(z:2), an Image class(z:1), and a MouseArea class. That Image class is the background, and contains a translucent image which becomes opaque when MouseArea is onPressed().

Now the strange part.

When the ListView has 4 elements, it operates normally -except- when the user selects entry #3, then entry #2 or #1.

When the selected entry goes from #3->#1, the text in entry #2 grays out as opposed to its normal white.
When the selected entry goes from #3->#2, the text in entry #2 completely disappears.

After hours of testing and banging head against desk, I've uncovered a bit more:

The opacity of MyButton or any of its children never changes.
The color of MyButton's text element never changes
The content of MyButton's test element never changes
After offsetting the text partially outside of MyButton, this abnormal behavior only affects the text remaining inside the bounds of MyButton's Image child.
The Z level of MyButton or any of its children never changes, though it appears as if MyButton's Image is being placed on top of its Text.
Another image is never placed on top of a MyButton element. If this was the case, when going from #3->#1 you would see the image of entry #2 become darker.
When the ListView is scrolled, everything returns to normal.

When ListView contains 4 elements, below are the abnormalities:

when #4->#1: #2 and #3 gray out
when #4->#2: #2 disappears
when #4->#3: #3 disappears
when #3->#2: #2 disappears
when #3->#1: #2 grays out

This is consistent to the image and text inside the MyButton class being re-ordered, placing the image a Z level above the text. However the z levels are forced in the MyButton definition, and an onZChanged signal is never created when these events happen.

Below is the relevant code:

//MyButton:
import QtQuick 2.0

Item {
    id: button
    property string source: ""
    property string source_toggled: source
    property string button_text_alias: ""
    signal pressed
    width: button_image.sourceSize.width
    height: button_image.sourceSize.height
    property bool toggled: false

    Image{
        id: button_image
        z: 1
        source: toggled ? parent.source_toggled : parent.source

    }
    MyText{
        z: 2
        text_alias: button_text_alias
        anchors.centerIn: parent
    }

    MouseArea {
        id: button_mouse
        anchors.fill: parent
        onPressed: button.pressed()
    }
}


//ListView:
Component{
    id: p_button
    MyButton{
        source: picture_path + "bar.png"
        source_toggled: picture_path + "bar_selected.png"
        toggled: model.isCurrent
        onClicked: {
            profile_model.setCurrent(model.index)
        }
        button_text_alias: model.display
    }
}
ListView{
    id: p_list
    width: 623
    height: count*74 -1
    spacing: 1
    interactive: false
    model: p_model
    delegate: p_button
}

I can't think of -anything- that could cause this behavior.. any ideas?

Paul Killam Paul Killam · Accepted Answer · 2017-04-25T22:07:44

I was able to solve this error by breaking up my delegate into:

Component{
    id: p_button
    Item{
        property bool toggled: model.isCurrent
        width: button_image.sourceSize.width
        height: button_image.sourceSize.height
        Image{
            id: button_image
            visible: !toggled
            source: picture_path + "bar.png"
        }
        Image{
            visible: toggled
            source: picture_path + "bar_selected.png"
        }
        MouseArea{
            anchors.fill: parent
            onClicked: p_model.setCurrent(model.index)
        }
        MyText{
            text_alias: model.display
            anchors.centerIn: parent
        }
    }
}

So instead of swapping the source of an object, there are two objects which become visible/invisible based on a boolean value. This prevented the issue, though I still don't know the cause.

QML ListView greys out or removes text of element when adjacent element is selected

1 Answers