QML —— Slider示例（附完整源码）

news2025/1/19 3:32:19

示例 - 效果

在这里插入图片描述

实例 - 源码

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5

Window
{
    id: rootId
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    Column
    {
        spacing: 50
        anchors.centerIn: parent

        Row
        {
            spacing: 10
            anchors.horizontalCenter: parent.horizontalCenter
            Text
            {
                font.family: "微软雅黑"
                font.pixelSize: 15
                text: qsTr("小球当前角度:")
            }
            Text
            {
                id: bollRotatoTxtID
                text: qsTr("0")
                font.family: "微软雅黑"
                width: 60
            }
        }

        Image
        {
            id: imgID
            height: 140
            width: 140
            source: "qrc:/ball.jpeg"
            anchors.horizontalCenter: parent.horizontalCenter

            NumberAnimation on rotation
            {
                id: imgAnimationId
                duration: 300
                running: true
                easing.type: Easing.Linear
            }

            onRotationChanged:{bollRotatoTxtID.text = Math.floor(rotation)}
        }

        Row
        {
            spacing: 10
            Text {text: qsTr("0");font.family: "微软雅黑"}
            Slider
            {
                id: sliderID
                width: rootId.width * 0.6
                from: 0
                to: 360
                live: true
                stepSize: 1

                // 记录小球起始角度
                property int oldRotatoAngle: 0
                onValueChanged:
                {
                    imgAnimationId.from = oldRotatoAngle
                    imgAnimationId.to = value

                    // 相同转动起止角则不转动
                    if(oldRotatoAngle != value){imgAnimationId.restart()}

                    oldRotatoAngle = value
                }
            }
            Text {text: qsTr("360");font.family: "微软雅黑"}
        }
    }
}