Qt/QML学习-ProgressBar

QML学习

main.qml

复制代码
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

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

    ProgressBar {
        id: progressBar
        width: 300
        height: 20
        anchors.centerIn: parent
        from: 0
        to: 100
        value: 50
        // 显示进度过程动画,不显示具体进度
        indeterminate: checkBox.checked
        background: Rectangle {
            color: "yellow"
            border.width: 1
        }
        contentItem: Item {
            // 利用from、to、value绘制进度
            Rectangle {
                id: rect
                width: parent.width / 20
                height: parent.height - 10
                y: 5
                color: "red"
                property real indeterminateX: 0
                x: progressBar.indeterminate? indeterminateX
                   : parent.width
                   / (progressBar.to - progressBar.from)
                   * (progressBar.value - progressBar.from)
                   - width / 2
                Timer {
                    interval: 10
                    repeat: true
                    running: progressBar.indeterminate
                    onTriggered: {
                        rect.indeterminateX += progressBar.width / 100
                        if (rect.indeterminateX >= (progressBar.width - rect.width)) {
                            rect.indeterminateX = 0
                        }
                    }
                }
            }
        }
    }

    CheckBox {
        id: checkBox
        anchors.bottom: progressBar.top
        anchors.left: progressBar.left
    }

    TextInput {
        id: textInput
        anchors.bottom: progressBar.top
        anchors.left: checkBox.right
        font.pointSize: 30
        onEditingFinished: {
            progressBar.value = text
        }
    }

    Component.onCompleted: {
        textInput.text = progressBar.value
    }
}

演示

视频讲解

相关推荐
醉暮天23 分钟前
4.25学习——文件上传之00截断
学习
xMathematics3 小时前
计算机图形学实践:结合Qt和OpenGL实现绘制彩色三角形
开发语言·c++·qt·计算机图形学·cmake·opengl
blackA_4 小时前
数据库MySQL学习——day4(更多查询操作与更新数据)
数据库·学习·mysql
梁下轻语的秋缘5 小时前
每日c/c++题 备战蓝桥杯(P1049 [NOIP 2001 普及组] 装箱问题)
c语言·c++·学习·蓝桥杯
星火撩猿6 小时前
ubantu中下载编译安装qt5.15.3
开发语言·qt
球求了6 小时前
C++:继承机制详解
开发语言·c++·学习
时光追逐者7 小时前
MongoDB从入门到实战之MongoDB快速入门(附带学习路线图)
数据库·学习·mongodb
一弓虽7 小时前
SpringBoot 学习
java·spring boot·后端·学习
genggeng不会代码8 小时前
用于协同显著目标检测的小组协作学习 2021 GCoNet(总结)
学习
机器视觉知识推荐、就业指导9 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml