1. QML封装控件---开关按钮

原创已于 2023-01-24 15:38:24 修改 · 529 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

于 2023-01-20 16:01:57 首次发布

QT_QML自封装控件库专栏收录该内容

15 篇文章

订阅专栏

该文章展示了如何用QtQuick编写一个自定义的开关按钮组件，包括开关状态的切换效果，颜色变化以及文本显示。代码中定义了开关的打开和关闭状态，并通过动画实现平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

自制开关按钮

整体代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.0

Item{
    id:switchBtnRoot
    implicitWidth: 60
    implicitHeight: 20

    //用于判断开关状态，外界可获取该状态值进行响应
    property bool isOpen: false

    Rectangle{
        id:bg
        anchors.fill: parent
        radius: switchBtnRoot.width/2
        state: !isOpen ? "close" : "open"

        property alias opentxtVis: openText.visible
        property alias closetxtVis: closeText.visible

        Text{
            id:openText
            anchors.verticalCenter: bg.verticalCenter
            anchors.left: bg.left
            anchors.leftMargin: 8
            text: "ON"
            color: "#F6F6F6"
            font.pixelSize: bg.height * 0.6
            visible: opentxtVis
        }
        Text{
            id:closeText
            anchors.verticalCenter: bg.verticalCenter
            anchors.right: bg.right
            anchors.rightMargin: 8
            text: "OFF"
            color: "#F6F6F6"
            font.pixelSize: bg.height * 0.6
            visible: closetxtVis
        }

        states: [
            State {
                name: "close"
                PropertyChanges {
                    target: bg
                    color:"#949599"
                    opentxtVis:false
                    closetxtVis:true
                }
            },
            State {
                name:"open"
                PropertyChanges {
                    target: bg
                    color:"#46C636"
                    opentxtVis:true
                    closetxtVis:false
                }
            }
        ]
        Rectangle{
            id:slider
            x:bg.x
            anchors.verticalCenter: bg.verticalCenter
            width: bg.height
            height: width
            radius: width/2
            color: "#F6F6F6"
            border.color:"#7D8184"
            border.width:1
            NumberAnimation on x{
                id:openAnim
                from: 0
                to:bg.width-slider.width
                duration: 250
                running: isOpen
                loops: 1
            }
            NumberAnimation on x{
                id:closeAnim
                from: bg.width-slider.width
                to:0
                duration: 250
                running: false
                loops: 1
            }
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                switchBtnRoot.isOpen = !switchBtnRoot.isOpen
                if(bg.state === "close"){
                    closeAnim.start()
                }
            }
        }
    }
}