qml学习----------------（progressBar）进度条的学习

最新推荐文章于 2025-06-17 07:34:10 发布
原创 最新推荐文章于 2025-06-17 07:34:10 发布 · 9.3k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

这篇博客介绍了Qt QML中进度条ProgressBar的学习过程，包括其主要属性如hovered、indeterminate、maximumValue等，并强调了通过style属性自定义进度条样式的方法，如设置背景颜色、控制条风格等。博主分享了相关代码以加深理解。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天学习了进度条的使用。查了下qt的官方文档，进度条主要有以下的属性
hovered : bool
indeterminate : bool
maximumValue : real
minimumValue : real
orientation : int //决定是水平的还是竖直的
style : Component
value : real

可以通过style来加载一个progressBarStyle来确定进度条的风格
background : Component //背景颜色
control : ProgressBar //进度条
currentProgress : real //当前进度
panel : Component //这个用来加载 背景颜色 ， 进度条等自定义组件的风格等
progress : Component

下面就看下代码来学习下：

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle{

    width: 520;
    height: 280;
    color:"#a0b0c0";


    Row{

        anchors.fill:  parent;
        anchors.margins: 50;
        spacing: 8;



        //进度条1
        ProgressBar{

            minimumValue: 0;
            maximumValue: 100;
            value: 40;
            width: 150;
            height: 20;

            Timer{
                interval: 1000;
                repeat: true;
                running: true;
                onTriggered: {
                    if(parent.value < 99.1){
                        parent.value += 1;
                    }else{
                        stop();
                    }
                }

            }

        }

        //进度条2
        ProgressBar{
            orientation: Qt.Vertical; //设置竖直滚动条
            minimumValue: 0;
            maximumValue: 1;
            value: 0.2;
            width: 20;
            height: 200;
            Timer{

                interval: 1000;
                repeat: true;
                running: true;
                onTriggered: {
                    parent.value = Math.random();
                }
            }

        }


        //进度条3
        ProgressBar{

            minimumValue: 0;
            maximumValue: 1;
            value: 0.2;
            width: 80;
            height: 16;
            //当indeterminte设置为真实， ProcessBar变成了BusyIndicator了，请稍等，不久后就会告诉你答案
            indeterminate: true;
        }



        Item{
            width: 180;
            height: parent.height;

            //进度条4
            ProgressBar{

                id: customProgress;
                anchors.centerIn: parent;
                minimumValue: 0;
                maximumValue: 1;
                value: 0.2;
                width: 160;
                height: 20;

                style: ProgressBarStyle{
                    background: Rectangle{
                        implicitWidth: 200;
                        implicitHeight: 20;
                        border.width: 1;
                        border.color: control.hovered ? "green":"gray";
                        color:"lightgray";
                    }


                    progress: Rectangle{

                        color: "#208020";
                    }

                }

            }



            //进度条5
            ProgressBar{
                id: percentProcess;
                anchors.top: customProgress.bottom;
                anchors.topMargin: 4;
                anchors.horizontalCenter: parent.horizontalCenter;
                minimumValue: 0;
                maximumValue: 1;
                value: 0.33;
                width: 160;
                height: 20;

                style: ProgressBarStyle{
                    id: progressStyle;
                    background: Rectangle{
                        border.width: 1;
                        border.color: control.hovered?"green":"gray";
                        color:"lightgray";
                    }


                    progress: Rectangle{
                        color:"#208020";

                    }


                    panel: Item{

                        //通过panel属性，可以加载  progress Text background等组件

                        //设置外边框
                        implicitWidth: 200;
                        implicitHeight: 20;

                        Loader{
                            anchors.fill:  parent;
                            sourceComponent: background;
                        }


                        Loader{
                            id: progressLoader;
                            anchors.top: parent.top;
                            anchors.left: parent.left;
                            anchors.bottom:  parent.bottom;
                            anchors.margins: 3;
                            z: 1;
                            width: currentProgress * (parent.width - 6);
                            sourceComponent: progressStyle.progress;

                        }


                        Text{

                            color: "blue";
                            text:currentProgress * 100 + "%";
                            z: 2;
                            anchors.centerIn: parent;

                        }

                    }
                }

            }

        }

    }

}
QML学习 —— 10、ProgressBar示例（附完整源码）
12-28 832
QML —— ProgressBar示例（附完整源码）
Qt/QML学习-ProgressBar
QT、QML
08-19 481
Qt/QML学习-ProgressBar
改变 ProgressBar 样式颜色
w6028819321的专栏
08-20 7170
几天我的教程里给出了一个作业，改变 ProgressBar 样式颜色。在这里分享一下源码。改变ProgressBar 的样式颜色，可以改变其背景颜色，也可以设置不同的图片。先上两个效果图： （进度条是 自定义图片）   （进度条是 自定义颜色） 一.修改背景为图片。 1.我自己制作了两张图片（如下图），并将它们放到工程的 /res/drawable 目录下。 （背景图片 p
【Qt】QProgressBar使用介绍
最新发布
weixin_43510208的博客
06-17 625
进度显示模式确定模式：通过精确控制进度不确定模式启用动态动画（无具体百分比）暂停状态：通过样式表实现（见第四部分）值范围控制// 设置范围（默认 0-99）// 最小值// 最大值// 当前值// 获取状态// 当前进度值文本格式化// 内置占位符// 显示 "75/100"progressBar->setFormat("已完成: %p%");// 显示 "已完成: 75%"// 自定义计算。
qml 进度条ProgressBar
qq_33373173的博客
11-17 4881
需要导入控件类 import QtQuick.Controls 2.3 属性 from:(real,默认为0.0)，范围的起始值 to:(real,默认为1.0)，范围的结束值 value:(real,默认为0.0) indeterminate:(bool,默认为false) 此属性保存进度条是否处于不确定模式，不确定模式下的进度条显示操作正在进行，但未显示已经进行了多少进度。 position:(real) 只读属性，控制进度条的逻辑位置，范围0.0-1.0 visualPosition:(real) .
qml的进度条
王春雨的博客
03-03 1514
3. 设置ProgressBar对象的background属性为一个Rectangle对象，并设置其color属性为一个JavaScript表达式，这个表达式可以根据需要计算出背景颜色。4. 设置ProgressBar对象的contentItem属性为一个Rectangle对象，并设置其color属性为一个JavaScript表达式，这个表达式可以根据需要计算出前景颜色。- value：表示进度条的当前值，范围是0到1，默认值是0。- from：表示进度条的最小值，范围是任意实数，默认值是0。
QML自定义进度条
08-30
使用Quick2进行自定义进度条 动画控制进度条移动 封装自定义进度条
Qml进度条
zhengtianzuo的博客
10-31 1692
基本上是官网例子上加了一些方法ProgressBar { property color proColor: "#148014" property color proBackgroundColor: "#AAAAAA" property int proWidth: 2 property real progress: 0 property real proRadi
QML复制文件并显示进度源码-增加剩余时间显示
10-17
在QML（Qt Quick）中实现文件复制并显示进度及剩余时间是一项常见任务，尤其是在创建桌面或移动应用时。QML是一种声明性语言，用于构建用户界面，它提供了丰富的功能来处理文件操作和UI更新。以下我们将深入探讨如何...
QT控件视图类（Qt-creator的视图控件）
05-24
`Q3ProgressBar` 显示进度条，与`QProgressBar` 功能相似。 ##### 14. Q3TextBrowser `Q3TextBrowser` 与`QTextBrowser` 类似，但提供了更多的功能和自定义选项。 总之，Qt提供了丰富的控件和布局类，这些组件...
快速下载：使用Qt QML和C ++轻松下载文件的方法
02-05
进度条通过监听`onProgress`信号更新。 然而，仅用QML可能无法满足所有需求，如断点续传、多线程下载或更复杂的错误处理。这时，我们需要结合C++来扩展功能。在Qt中，我们可以创建一个C++类，然后暴露给QML使用，这...
Qml进度条QmlProgress.7z
11-22
Qml进度条QmlProgress.7z
qml实现圆形进度条
11-01
用QML实现圆形进度条
QML的TableView中实现数据以不同的形式进行表现-对每列进行自定义
06-09
在QML中，`TableView`是一个非常有用的组件，它用于展示结构化数据，通常用于创建表格或列表视图。在本示例中，我们将探讨如何在`TableView`中实现每列数据以不同的形式表现，这涉及到`Column`和`delegate`的概念。 ...
QML进度条样式
weixin_40299495的博客
04-19 581
控件样式QtQuick.Controls.Styles实现进度条控件样式的修改。background: Rectangle:设置进度条底色样式。progress: Rectangle:设置进度条数值填充样式。height、width根据自身需要自行调整。value的取值范围是::0-1。
QML_进度条ProgressBar
会选科技的博客
06-10 3685
QML_进度条ProgressBar
qml进度条
caicai_xiaobai的博客
06-08 335
前面说的return app.exec() 这句话是用来使程序进入事件循环，除了直接递交的事件外，所有的事件都要在这个循环中被一层一层的分发，最后找到相应的处理函数来处理事件。 顶级窗口和顶级窗口是存在两个不同的事件循环中的，比如说QMainWindow和QWidget，想让一个顶级窗口中的事件能够在另外一个顶级窗口中响应，必须把两个顶级窗口合并，比如setCentralWidget就可以把Qwidget设置为QMainWindow的主窗口。 ...
QML指示控件: ProgressBar
u011186532的专栏
03-24 748
ProgressBar是Qt Quick Controls模块中常用的控件之一，用于显示任务的进度。它广泛应用于文件下载、数据处理、加载动画等场景。本文将详细介绍如何在QML中使用ProgressBar控件，并结合示例帮助您更好地理解其用法。
使用 qt-mvvm 库实现自定义属性列表展示
06-09
<think>我们正在使用QtMvvm库实现自定义属性列表展示。根据之前的示例，我们定义了ViewModel和对应的数据类（Contact），并使用ListModel来管理列表数据。现在，用户的需求是展示具有自定义属性的列表。假设我们的数据类有多个属性，并且我们希望在QML中能够访问这些属性。回顾之前的步骤：1.定义数据类（例如Contact），使用Q_GADGET和Q_PROPERTY声明属性。2.在ViewModel中创建ListModel实例，并注册数据类。3.在ViewModel中提供操作列表的方法（如添加、删除等）。4.在QML中，通过ListModel的role名称（即数据类的属性名）来访问数据。为了展示自定义属性，我们只需要在数据类中增加相应的属性即可。示例扩展：假设我们除了name和phone外，还想增加一个自定义属性，如头像（avatar），类型为字符串（URL）。步骤：1.修改Contact类，增加avatar属性。2.在ViewModel的addContact方法中，添加avatar参数，并在添加数据时包含avatar。3.在QML视图中，使用新的属性。注意：由于ListModel会为数据类的每个属性创建角色，所以我们不需要额外设置。具体代码调整如下：</think> ### 使用 QtMVVM 实现自定义属性列表展示 以下是基于 QtMVVM 库实现自定义属性列表展示的完整方案： --- #### 1. 定义数据类（带自定义属性） ```cpp #include <QObject> #include <QUrl> class CustomItem : public QObject { Q_OBJECT Q_PROPERTY(QString title READ title CONSTANT) Q_PROPERTY(QString description READ description CONSTANT) Q_PROPERTY(int priority READ priority CONSTANT) Q_PROPERTY(QUrl imageUrl READ imageUrl CONSTANT) public: explicit CustomItem(QString title, QString description, int priority, QUrl imageUrl, QObject* parent = nullptr) : QObject(parent), _title(std::move(title)), _description(std::move(description)), _priority(priority), _imageUrl(std::move(imageUrl)) {} QString title() const { return _title; } QString description() const { return _description; } int priority() const { return _priority; } QUrl imageUrl() const { return _imageUrl; } private: QString _title; QString _description; int _priority; QUrl _imageUrl; }; // main.cpp 中注册元类型 Q_DECLARE_METATYPE(CustomItem*) ``` --- #### 2. 定义 ViewModel（管理列表数据） ```cpp #include <QtMvvmCore/ViewModel> #include <QtMvvmDataSync/ListModel> class CustomListViewModel : public QtMvvm::ViewModel { Q_OBJECT Q_PROPERTY(QtMvvm::ListModel* items READ items CONSTANT) public: explicit CustomListViewModel(QObject* parent = nullptr) : ViewModel(parent), _itemsModel(new QtMvvm::ListModel(this)) { // 注册数据类型 _itemsModel->registerType<CustomItem>(); // 添加示例数据 addItem("项目A", "高优先级任务", 1, QUrl("qrc:/icons/high.png")); addItem("项目B", "常规任务", 2, QUrl("qrc:/icons/normal.png")); } QtMvvm::ListModel* items() const { return _itemsModel; } Q_INVOKABLE void addItem(const QString& title, const QString& description, int priority, const QUrl& imageUrl) { _itemsModel->append(new CustomItem(title, description, priority, imageUrl)); } Q_INVOKABLE void removeItem(int index) { if (index >= 0 && index < _itemsModel->count()) { _itemsModel->remove(index); } } private: QtMvvm::ListModel* _itemsModel; }; ``` --- #### 3. QML 视图实现 ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 import QtMvvm.Core 1.0 ApplicationWindow { width: 600 height: 800 visible: true property CustomListViewModel viewModel: ViewModelLoader { viewModelType: "CustomListViewModel" } ListView { anchors.fill: parent model: viewModel.items delegate: ItemDelegate { width: parent.width height: 100 Row { spacing: 20 anchors.fill: parent anchors.margins: 10 Image { source: model.imageUrl width: 80 height: 80 fillMode: Image.PreserveAspectFit } Column { width: parent.width - 140 spacing: 5 Label { text: model.title font.bold: true font.pixelSize: 18 } Label { text: model.description width: parent.width wrapMode: Text.Wrap } ProgressBar { value: 3 - model.priority // 优先级越高进度条越满 to: 2 width: parent.width } } Button { text: "删除" onClicked: viewModel.removeItem(model.index) } } } } } ``` --- #### 4. 注册 ViewModel（main.cpp） ```cpp #include <QtMvvmCore/ServiceRegistry> #include <QtMvvmCore/Settings> #include <QtMvvmCore/ViewModelRegister> int main(int argc, char *argv[]) { // 注册服务 QtMvvm::ServiceRegistry::registerObject<QtMvvm::Settings>(); // 注册ViewModel QtMvvm::ViewModelRegister::registerViewModel<CustomListViewModel>("CustomListViewModel"); // 启动应用 QtMvvm::QuickApp app(argc, argv); app.setAppDisplayName("自定义属性列表"); // 加载QML app.load(QUrl("qrc:/main.qml")); return app.exec(); } ``` --- ### 关键特性实现 #### 1. 自定义属性绑定 实现模型与视图的自动同步： $$ \text{数据变更} \rightarrow \text{ListModel} \xrightarrow{\text{信号}} \text{QML视图} $$ ```qml // QML中直接绑定自定义属性 Label { text: model.title color: model.priority === 1 ? "red" : "black" } ``` #### 2. 属性变更通知 在数据类中添加属性变更通知： ```cpp // 在CustomItem类中添加 Q_PROPERTY(int progress READ progress WRITE setProgress NOTIFY progressChanged) signals: void progressChanged(); ``` #### 3. 动态排序 ```cpp // 在ViewModel中添加排序方法 Q_INVOKABLE void sortByPriority() { _itemsModel->sort([](const QObject* a, const QObject* b) { auto itemA = qobject_cast<const CustomItem*>(a); auto itemB = qobject_cast<const CustomItem*>(b); return itemA->priority() < itemB->priority(); }); } ``` --- ### 性能优化建议 1. **分页加载** ```cpp _itemsModel->setChunkSize(20); // 每次加载20条 ``` 2. **异步加载** ```cpp QFuture<void> future = QtConcurrent::run([this]{ // 网络请求或数据库操作 _itemsModel->appendBatch(items); }); ``` 3. **角色选择** ```qml ListView { delegate: ItemDelegate { // 仅绑定实际使用的属性 text: model.title // 避免访问model.description等未使用的属性 } } ``` --- ### 常见问题解决 1. **属性未显示** - 检查 `Q_PROPERTY` 声明是否包含 `READ` 方法 - 确认 `registerType<CustomItem>()` 已调用 - 确保 QML 使用 `model.propertyName` 格式 2. **数据更新延迟** 在修改属性后手动触发刷新： ```cpp emit dataChanged(createIndex(row, 0), createIndex(row, 0)); ``` 3. **跨线程访问** 使用 `QMetaObject::invokeMethod` 进行线程安全的数据操作： ```cpp QMetaObject::invokeMethod(_itemsModel, "append", Qt::QueuedConnection, Q_ARG(QObject*, newItem)); ``` ---
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值