如何设置QML Switch组件的开关状态颜色与对应文本？

要实现Switch开启时显示"On"且为绿色、关闭时显示"Off"且为红色，只需利用Switch的checked属性进行动态绑定即可，修改后的代码如下：

Rectangle {
    id: rectangle_gps_l1_deger

    color: row_even
    border.width: 2
    border.color: "black"

    Layout.alignment: Qt.AlignCenter
    Layout.preferredWidth: mainWindow.width/8
    Layout.preferredHeight: mainWindow.height/22
    Layout.margins: -3
    Layout.fillWidth: true
    
    ColumnLayout {
        anchors.centerIn: parent
        Switch {
            id: switch_rectangle_gps_l1_deger
            
            // 根据选中状态切换文本
            text: checked ? qsTr("On") : qsTr("Off")
            // 根据选中状态切换Material主题色
            Material.accent: checked ? Material.Green : Material.Red
        }
    }
}

关键修改说明： #

• 文本动态切换：通过三元表达式checked ? qsTr("On") : qsTr("Off")，当Switch处于选中（开启）状态时显示"On"，未选中（关闭）时显示"Off"，用qsTr()包裹文本便于后续国际化处理。
• 颜色动态切换：同样通过三元表达式绑定Material.accent属性，选中时使用Material绿色，未选中时使用Material红色，这会自动应用到Switch的滑块和激活状态的样式上。

如果需要更精细化的样式控制（比如修改Switch的背景底色），可以自定义Switch的background和handle组件，示例如下：

Switch {
    id: switch_rectangle_gps_l1_deger
    
    text: checked ? qsTr("On") : qsTr("Off")

    background: Rectangle {
        color: checked ? "#e8f5e9" : "#ffebee" // 开启/关闭时的背景色
        border.color: checked ? "green" : "red"
        border.width: 2
        radius: height / 2
    }

    handle: Rectangle {
        color: checked ? "green" : "red"
        radius: height / 2
    }
}

这种方式可以完全自定义Switch的外观，满足更个性化的需求。

内容的提问来源于stack exchange，提问作者Mert Turfan