qml自定义SwitchButton

来源：互联网发布：薛之谦像风一样知乎编辑：程序博客网时间：2024/06/03 16:15

qml自定义SwitchButton

效果图：
这里写图片描述

切换选择按钮SwitchButton.qml

import QtQuick 2.0Item {    id:root    width: bgImage.implicitWidth    height: bgImage.implicitHeight    property bool selected: false    property bool selectAuto: true    //替换为自己的图片资源路径    property string bgNormalSource://"Setting/set_wif_connected_close_bg.png"    property string bgSelectedSource: //"Setting/set_wif_connected_open_bg.png"    property string btnSource://"Setting/set_wif_connected_button.png"    signal clicked    //默认正常状态    state:"normal"    //状态机,"normal" \ "selected" 2种状态    states:[        State{            name:"normal"            PropertyChanges {                target:bgImage                source: bgNormalSource            }            PropertyChanges {                target:btn                x:0 -10            }qml自定义SwitchButton            when:!selected        },        State{            name:"selected"            PropertyChanges {                target:bgImage                source: bgSelectedSource            }            PropertyChanges {                target:btn                x:bgImage.width - btn.width +10            }            when:selected        }    ]    Image{        id:bgImage        anchors.fill: parent        Image{            id:btn            anchors.verticalCenter: parent.verticalCenter            source:btnSource        }    }//bgImage    MouseArea{        id:mainMouse        anchors.fill: parent        onClicked: {            root.clicked()        }        onReleased: {            if(selectAuto){                selected = !selected            }        }    }}

阅读全文

0 0