Qt基于Qml选择开关示例

去往火星

于 2024-07-17 10:40:39 发布

阅读量230

点赞数 2

分类专栏： QT 学习笔记文章标签： qt 开发语言

本文链接：https://blog.csdn.net/qq_35662333/article/details/139166347

版权

QT 学习笔记专栏收录该内容

113 篇文章 13 订阅

订阅专栏

演示效果

切换开关组件实现QML

ToggleButton.qml

import QtQuick 2.12
 
Rectangle {
    id: root
    width: 80
    height: 26
    color: "#EAEAEA"
    radius: 13
 
    property string leftString
    property string rightString
    signal toggleLeft //左开关信号
    signal toggleRight //右开关信号
 
    Rectangle {
        id: rect
        width: parent.width * 0.6
        radius: parent.radius
        color: rect.state === "left"? "#FF00FF" : "#CCCCCC" //根据状态切换背景色
        state: "left"
        anchors {
            top: parent.top
            bottom: parent.bottom
        }
 
        states: [
            State {
                name: "right"
                PropertyChanges {
                    target: rect
                    x: root.width - rect.width
                }
            }
 
        ]
 
        transitions: [
            Transition {
                from: "*"
                to: "*"
                NumberAnimation { property: "x"; duration: 200 }
            }
        ]
 
        Text {
            id: label
            anchors.centerIn: parent
            text: rect.state === "left"? root.leftString : root.rightString
            color: "white"
            font.pointSize: 10
        }
    }
 
    MouseArea {
        anchors.fill: parent
        onPressed: {
            //点开切换状态
            if(rect.state === "left"){
                rect.state = "right";
                root.toggleRight();
            }else {
                rect.state = "left";
                root.toggleLeft();
            }
        }
    }
}

使用组件

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: qsTr("Qt基于Qml选择开关示例")
    Label{
        id: label
        anchors.bottom: qmlToggleButton.top
        anchors.horizontalCenter: parent.horizontalCenter
        height: 24
        width: contentWidth
    }
    ToggleButton{
        id: idToggleButton
        anchors.centerIn: parent
        height: 38
        width: 100
        leftString: qsTr("打开")
        rightString: qsTr("关闭")
        onToggleLeft: label.text = idToggleButton.leftString
        onToggleRight: label.text = idToggleButton.rightString
    }
}