选择相邻元素时，QML ListView变灰或删除元素的文本

Question

所以在测试我的程序时，我发现了最奇怪的事情。

所以，我有一个带有自定义 C++ 模型的 ListView 元素和一个相当简单的委托。每个委托都是一个 MyButton 类，它只是一个 Text 类 (z:2)、一个 Image 类 (z:1) 和一个 MouseArea 类。该 Image 类是背景，包含一个半透明图像，当 MouseArea 为 onPressed() 时，该图像变得不透明。

现在是奇怪的部分。

当 ListView 有 4 个元素时，它正常运行 - 除非用户选择条目 #3，然后选择条目 #2 或 #1。

• 当所选条目从 #3->#1 变为灰色时，条目 #2 中的文本将变为灰色，而不是正常的白色。
• 当所选条目从#3->#2 开始时，条目#2 中的文本完全消失。

经过数小时的测试和头撞桌子后，我发现了更多：

• MyButton 或其任何子项的不透明度永远不会改变。
• MyButton 文本元素的颜色永远不会改变
• MyButton 的测试元素的内容永远不会改变
• 在将文本部分偏移到 MyButton 之外后，这种异常行为只会影响剩余在 MyButton 子图像边界内的文本。
• MyButton 或其任何子项的 Z 水平永远不会改变，尽管它看起来好像 MyButton 的 Image 被放置在其 Text 之上。
• 另一个图像永远不会放在 MyButton 元素的顶部。如果是这种情况，当从 #3->#1 开始时，您会看到条目 #2 的图像变暗。
• ListView 滚动后，一切恢复正常。

当ListView包含4个元素时，异常如下：

• 当#4->#1：#2 和#3 变灰时
• 当#4->#2:#2 消失时
• 当#4->#3:#3 消失时
• 当#3->#2:#2 消失时
• 当#3->#1:#2 变灰时

这与重新排序的 MyButton 类中的图像和文本一致，将图像放置在文本上方的 Z 级。然而，z 级别在 MyButton 定义中是强制的，并且在这些事件发生时永远不会创建 onZChanged 信号。

下面是相关代码：

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

我想不出任何可能导致这种行为的东西......有什么想法吗？

Answer 1

我能够通过将我的委托分解为：

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

因此，不是交换对象的源，而是有两个对象根据布尔值变得可见/不可见。这阻止了这个问题，尽管我仍然不知道原因。