Qml圆形进度按钮

来源：互联网发布：大数据怎么可视化编辑：程序博客网时间：2024/05/22 06:25

首先从方形到圆形的转变只需要更改Rectangle的radius值就行了
转变成圆形后就可以出现圆形进度条

Rectangle{        property int btnHeight: 48        property int btnWidth: 120        id: cProBtn        height: btnHeight        width: btnWidth        anchors.centerIn: parent        border.color: "#148014"        border.width: 2        radius: 0        Text{            id: cText            anchors.centerIn: parent            font.family: "microsoft yahei"            font.pixelSize: 14            text: qsTr("开始")        }        MouseArea{            anchors.fill: parent            onClicked: {                if (rAniStart.running || rAniStop.running) return                cText.visible = false;                rAniStart.start();                widthAniStart.start();            }        }        PropertyAnimation{            id: rAniStart            target: cProBtn            property: "radius"            duration: 300            from: 0            to: cProBtn.btnHeight/2            onStopped: {                cProgress.onStart();                cProgress.visible = true;            }        }        PropertyAnimation{            id: widthAniStart            target: cProBtn            property: "width"            duration: 300            from: cProBtn.btnWidth            to: cProBtn.btnHeight        }        QmlCircularProgress{            id: cProgress            anchors.centerIn: parent            visible: false            arcWidth: 2            radius: cProBtn.btnHeight/2            interval: 2            arcColor: "#148014"            onSStop: {                visible = false;                rAniStop.start();                widthAniStop.start();            }        }        PropertyAnimation{            id: rAniStop            target: cProBtn            property: "radius"            duration: 300            from: cProBtn.btnHeight/2            to: 0            onStopped: {                cText.text = qsTr("完成");                cText.visible = true;            }        }        PropertyAnimation{            id: widthAniStop            target: cProBtn            property: "width"            duration: 300            from: cProBtn.btnHeight            to: cProBtn.btnWidth        }    }

这里写图片描述

需要完整代码请访问QtQuickExamples

阅读全文

0 0