如何实现UI控件的点击切换状态功能？（基于Qt RowLayout）

核心思路 #

给每个筛选器控件添加布尔类型的active属性，通过属性绑定关联控件的边框样式、图片遮罩颜色，点击时切换该属性值实现状态切换，同时设置第一个控件默认处于激活状态。

修正后的完整代码 #

RowLayout{
    spacing: 32

    // 第一个筛选器（默认激活）
    Rectangle{
        id: filter1
        height: 64
        width: 64
        radius: 8
        color: "#2E2E2E"
        border.width: active ? 1 : 0
        border.color: "#C9A86B"
        // 激活状态标记
        property bool active: true

        Image {
            id: youTube
            source: "qrc:/Images/youTube.svg"
            anchors.centerIn: parent
        }
        ColorOverlay {
            id: overlay
            anchors.fill: youTube
            source: youTube
            color: active ? "#C9A86B" : "#FFFFFF"
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                filter1.active = !filter1.active
            }
        }
    }

    // 第二个筛选器
    Rectangle{
        id: filter2
        height: 64
        width: 64
        radius: 8
        color: "#2E2E2E"
        border.width: active ? 1 : 0
        border.color: "#C9A86B"
        property bool active: false

        Image {
            id: img
            source: "qrc:/Images/img.svg"
            anchors.centerIn: parent
        }
        ColorOverlay {
            id: overlay2
            anchors.fill: img
            source: img
            color: active ? "#C9A86B" : "#FFFFFF"
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                filter2.active = !filter2.active
            }
        }
    }

    // 第三个筛选器
    Rectangle{
        id: filter3
        height: 64
        width: 64
        radius: 8
        color: "#2E2E2E"
        border.width: active ? 1 : 0
        border.color: "#C9A86B"
        property bool active: false

        Image {
            id: headphones
            source: "qrc:/Images/headphones.svg"
            anchors.centerIn: parent
        }
        ColorOverlay {
            id: overlay3
            anchors.fill: headphones
            source: headphones
            color: active ? "#C9A86B" : "#FFFFFF"
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                filter3.active = !filter3.active
            }
        }
    }
}

关键修改点 #

• 状态标记：给每个筛选器控件新增active布尔属性，第一个控件默认设为true，其余为false
• 样式绑定：将边框宽度、图片遮罩颜色与active属性绑定，状态变化时自动更新样式，无需手动修改属性值
• 交互优化：把MouseArea的onPressed替换为onClicked，点击时切换active属性值，实现激活/未激活状态的切换
• 逻辑统一：修正原代码中部分控件缺失边框宽度设置的问题，确保所有控件样式逻辑一致

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