简述

在之前的章节中分享过关于QHeaderView表头排序、添加复选框等内容,相信大家模型/视图、自定义风格有了一定的了解,下面我们来分享一个更常用的内容-自定义进度条。

实现方式:

  1. 从QAbstractTableModel中设置对应的进度数据,因为我们需要显示进度条,而不是直接显示进度文本,所以原始的数据不需要直接显示在界面上,所以不需要使用Qt::DisplayRole,可以使用Qt::UserRole来代替。

  2. 委托QStyledItemDelegate中根据进度索引所对应的数据来获取进度,然后为QStyleOptionProgressBar设置进度值、显示文本等信息。

  3. 设置样式,这里需要QStyle在绘制的时候设置drawControl的最后一个参数,是一个QWidget *,这里我们使用QProgressBar即可。

效果

数据结构

下面定义了文件名、大小、状态、进度所对应的列,以及一个保存数据的结构体。

#define FILE_DOWNLOAD_FILE_NAME_COLUMN           0
#define FILE_DOWNLOAD_SIZE_COLUMN 1
#define FILE_DOWNLOAD_STATUS_COLUMN 2
#define FILE_DOWNLOAD_PROGRESS_COLUMN 3 // 下载记录
struct FileDownloadRecord
{
QString strFileName; //文件名称
qint64 nSize; //大小
int nStatus; //状态
int nProgress; //进度
};

QStyledItemDelegate

这里只有绘制部分的代码,model对应的代码这里不再列出,可以参考其它对应的文章。

源码

void ProgressBarDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
QStyleOptionViewItem viewOption(option);
initStyleOption(&viewOption, index);
if (option.state.testFlag(QStyle::State_HasFocus))
viewOption.state = viewOption.state ^ QStyle::State_HasFocus; QStyledItemDelegate::paint(painter, viewOption, index); if (index.column() == FILE_DOWNLOAD_PROGRESS_COLUMN)
{
int nProgress = index.model()->data(index, Qt::UserRole).toInt();
int nLeft = 8;
int nTop = 8;
int nWidth = option.rect.width() - 2 * nLeft;
int nHeight = option.rect.height() - 2 * nTop; // 设置进度条的风格
QStyleOptionProgressBar progressBarOption;
progressBarOption.initFrom(option.widget);
// 设置进度条显示的区域
progressBarOption.rect = QRect(option.rect.left() + nLeft, option.rect.top() + nTop, nWidth, nHeight);
// 设置最小值
progressBarOption.minimum = 0;
// 设置最大值
progressBarOption.maximum = 100;
// 设置对齐方式
progressBarOption.textAlignment = Qt::AlignCenter;
// 设置进度
progressBarOption.progress = nProgress;
// 设置文本(百分比)
progressBarOption.text = QString("%1%").arg(nProgress);
// 设置文本可见
progressBarOption.textVisible = true; QProgressBar progressBar; //绘制进度条
QApplication::style()->drawControl(QStyle::CE_ProgressBar, &progressBarOption, painter, &progressBar);
}
}

QThread

为了模拟真实性,所以起了一个线程,每隔1秒刷新一次。

FileDownloadThread::FileDownloadThread(QObject *parent)
: QThread(parent)
{
qRegisterMetaType<QList<FileDownloadRecord>>("QList<FileDownloadRecord>");
} FileDownloadThread::~FileDownloadThread()
{
requestInterruption();
wait();
} void FileDownloadThread::run()
{
while (!isInterruptionRequested())
{
QTime time;
time= QTime::currentTime();
qsrand(time.msec()+time.second()*1000); QList<FileDownloadRecord> list;
for (int i = 0; i < 5; ++i)
{
FileDownloadRecord record;
record.strFileName = QString("/root/user/file%1.log").arg(i + 1);
record.nSize = 1024 / ((i + 2) *(i + 2)) ;
record.nStatus = i;
record.nProgress = qrand() % 100 + 1; list.append(record);
} emit transfer(list);
msleep(1000);
}
}

样式

QProgressBar{
border: none;
text-align: center;
background: rgb(210, 225, 240);
}
QProgressBar::chunk {
background: rgb(0, 160, 230);
}

衍伸

这里为了美观,我设置进度条距离左、上、右、下的距离均为8px,而且单元格里面只显示了一个进度条。

这里只需要控制好单元格绘制区域位置rect即可,你可以在里面添加任意自定义的控件,而且可以添加任意多个,随意排列组合。

Qt之模型/视图(自定义进度条)的更多相关文章

  1. Qt之模型/视图(自定义风格)

    Qt之模型/视图(自定义风格) 关于自定义风格是针对视图与委托而言的,使用事件与QSS都可以进行处理,今天关于美化的细节讲解一下. 先看下图: 先撇开界面的美观性(萝卜青菜,各有所爱),就现有的这些风 ...

  2. android113 自定义进度条

    MainActivity: package com.itheima.monitor; import android.os.Bundle; import android.app.Activity; im ...

  3. C# 根据BackgroundWoker异步模型和ProgressBar控件,自定义进度条控件

    前言 程序开发过程中,难免会有的业务逻辑,或者算法之类产生让人能够感知的耗时操作,例如循环中对复杂逻辑处理;获取数据库百万乃至千万级数据;http请求的时候等...... 用户在使用UI操作并不知道程 ...

  4. android 自定义进度条颜色

    android 自定义进度条颜色 先看图 基于产品经理各种自定义需求,经过查阅了解,下面是自己对Android自定义进度条的学习过程!   这个没法了只能看源码了,还好下载了源码, sources\b ...

  5. 自定义进度条PictureProgressBar——从开发到开源发布全过程

    自定义进度条PictureProgressBar——从开发到开源发布全过程 出处: 炎之铠邮箱:yanzhikai_yjk@qq.com 本文原创,转载请注明本出处! 本项目JCenter地址:htt ...

  6. BitBlt()函数实现带数字百分比进度条控件、静态文本(STATIC)控件实现的位图进度条、自定义进度条控件实现七彩虹颜色带数字百分比

    Windows API BitBlt()函数实现带数字百分比进度条控件. 有两个例子:一用定时器实现,二用多线程实现. 带有详细注解. 此例是本人原创,绝对是网上稀缺资源(本源码用Windows AP ...

  7. Qt之模型/视图(自定义按钮)

    简述 衍伸前面的章节,我们对QTableView实现了数据显示.自定义排序.显示复选框.进度条等功能的实现,本节主要针对自定义按钮进行讲解,这节过后,也希望大家对自定义有更深入的了解,在以后的功能开发 ...

  8. Qt 之模型/视图(自定义按钮)

    https://blog.csdn.net/liang19890820/article/details/50974059 简述 衍伸前面的章节,我们对QTableView实现了数据显示.自定义排序.显 ...

  9. Qt 自定义 进度条 纯代码

    一 结果图示 二 代码 头文件 #ifndef CPROGRESS_H #define CPROGRESS_H #include <QWidget> #include <QPaint ...

随机推荐

  1. ios frame、bound和center定义及使用场景总结

    frame:指的是视图在父视图的坐标系统中的大小和位置. bound:指的是视图在视图本身的坐标系统中的大小(位置起点是原点). center:指的是视图在父视图坐标系统中的中心点. frame和bo ...

  2. mybatis insert 如何返回主键

    在使用ibatis插入数据进数据库的时候,会用到一些sequence的数据,有些情况下,在插入完成之后还需要将sequence的值返回,然后才能进行下一步的操作.       使用ibatis的sel ...

  3. 解决Myeclipse 编辑jsp页面卡

    解决Myeclipse 编辑jsp页面卡   编辑一个jsp页面时,如果每输入一下,CPU都100%一下,和大家分项一下. 问题: 当你编辑一个jsp页面时,如果每输入一下,CPU都100%一下,3, ...

  4. POJ3164 Command Network(最小树形图)

    图论填个小坑.以前就一直在想,无向图有最小生成树,那么有向图是不是也有最小生成树呢,想不到还真的有,叫做最小树形图,网上的介绍有很多,感觉下面这个博客介绍的靠谱点: http://www.cnblog ...

  5. JavaScript文件应该放在网页的什么位置

    JavaScript文件应该放在网页的什么位置 http://www.lihuai.net/qianduan/js/352.html 在<良好的JavaScript编程习惯>系列教程的第三 ...

  6. POJ 1317

    #include <iostream> #include <string> using namespace std; char p_code[] = {'_','a','b', ...

  7. ***ECharts图表入门和最佳实践

    ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...

  8. poj 2975 Nim 博弈论

    令ans=a1^a2^...^an,如果需要构造出异或值为0的数, 而且由于只能操作一堆石子,所以对于某堆石子ai,现在对于ans^ai,就是除了ai以外其他的石子 的异或值,如果ans^ai< ...

  9. Eclipse下Python的MySQLdb的安装以及相关问题

    前提是要安装好Python以及eclipse和MySQL的相应版本.本文Python为2.7,MySQL为5.1Eclipse为3.6.2 下载完MySQLdb以后,直接安装即可.在eclipse中启 ...

  10. lintcode :First bad version 第一个错误的代码版本

    题目 第一个错误的代码版本 代码库的版本号是从 1 到 n 的整数.某一天,有人提交了错误版本的代码,因此造成自身及之后版本的代码在单元测试中均出错.请找出第一个错误的版本号. 你可以通过 isBad ...