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
    }
}

演示

视频讲解

相关推荐
charlie114514191几秒前
HTML 理论笔记
开发语言·前端·笔记·学习·html·1024程序员节
Source.Liu3 分钟前
【CMakeLists.txt】QtSvg 头文件包含配置详解
c++·qt·librecad
知识分享小能手16 分钟前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手18 分钟前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
Yupureki1 小时前
从零开始的C++学习生活 14:map/set的使用和封装
c语言·数据结构·c++·学习·visual studio·1024程序员节
Yupureki1 小时前
从零开始的C++学习生活 15:哈希表的使用和封装unordered_map/set
c语言·数据结构·c++·学习·visual studio·1024程序员节
Mr.Jessy2 小时前
JavaScript学习第六天:函数
开发语言·前端·javascript·学习·html·1024程序员节
生物小卡拉2 小时前
指定列交集内容合并-Rscript_v1.0
笔记·学习·r语言
Gorgous—l3 小时前
数据结构算法学习:LeetCode热题100-链表篇(下)(随机链表的复制、排序链表、合并 K 个升序链表、LRU 缓存)
数据结构·学习·算法
流星5211223 小时前
GC 如何判断对象该回收?从可达性分析到回收时机的关键逻辑
java·jvm·笔记·学习·算法