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

Posted 2023-02-14

【中文标题】选择相邻元素时，QML ListView变灰或删除元素的文本

【英文标题】：QML ListView greys out or removes text of element when adjacent element is selected

【发布时间】：2017-04-21 18:30:28

【问题描述】：

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

所以，我有一个带有自定义 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

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

【参考方案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
        
    

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