color: menuItem.highlighted?"yellowgreen":"transparent"-QT开发中文网

在 QML 中，你可以使用条件表达式来根据状态或属性的变化来设置颜色。你提到的代码片段 color: menuItem.highlighted ? "yellowgreen" : "transparent" 是用来根据 menuItem 的 highlighted 属性动态改变颜色的。

示例

假设我们有一个自定义菜单项（比如一个按钮或列表项），当它被高亮（例如鼠标悬停或选中）时，其背景色会变为 “yellowgreen”，否则为透明色。以下是如何实现这个逻辑的完整示例：

import QtQuick 2.0
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 400
    height: 300

    ListView {
        width: parent.width
        height: parent.height
        
        model: ["Item 1", "Item 2", "Item 3"]

        delegate: MenuItem {
            text: modelData
            
            // 动态设置颜色
            Rectangle {
                anchors.fill: parent
                color: highlighted ? "yellowgreen" : "transparent"

                Text {
                    anchors.centerIn: parent
                    text: modelData
                    color: "black"
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked:
                        console.log(text + " clicked")
                    
                    // 更新 highlighted 状态
                    onPressed:
                        highlighted = true
                    
                    onReleased:
                        highlighted = false

                    onClicked:
                        highlighted = false // 点击后取消高亮状态
                    
                    // 使用 Timer 来恢复高亮状态，模拟悬停效果，可以调整时间。
                    Timer {
                        interval: 200 // 在这里设置需要多久恢复透明背景（毫秒）
                        running: false
                        repeat: false

                        onTriggered: highlighted = false 
                        
                        Component.onCompleted: mouseArea.onPressed.connect(() => { running = true; start(); });
                    }
                }
            }
        }
    }

}

Component {
    id: menuItemComponent
    
    Item {
        property bool highlighted: false

        Rectangle {
            anchors.fill: parent
            
            // 背景颜色根据 highlighted 状态变化
            color: highlighted ? "yellowgreen" : "transparent"

            Text {
                anchors.centerIn: parent
                text: ""
                color: "black"
            }

            MouseArea {
                anchors.fill: parent
                
                onEntered:
                    highlighted = true // 鼠标进入时高亮
                    
                onExited:
                    highlighted = false // 鼠标离开时取消高亮
                
                onClicked:
                    console.log("Menu Item Clicked")
            }
        }
        
        Connections {
            target: menuItemComponent
            
            onTextChanged:
                text = menuItemComponent.text // 更新文本内容显示 
        }
    }
}

解释

ListView：依旧是用于展示项目。
delegate：我们使用 MenuItem，并通过在其内部创建一个 Rectangle 来表示每个列表项。
动态颜色：通过绑定 color 属性到 highlighted 状态，我们能让每个菜单项在不同交互下呈现不同的背景色。
MouseArea：
- 当鼠标进入 (onEntered) 和离开 (onExited) 时更新 highlighted 属性。
- 点击时打印出信息，并重置高亮状态。
Timer (可选)：可以使用定时器在一定时间后自动将状态回归，为用户提供更好的体验。