立即注册 找回密码

微雪课堂

搜索
微雪课堂 树莓派 树莓派QT教程 查看内容

树莓派Qt系列教程13:进度条ProgressBar

2020-7-30 10:11| 发布者: dasi| 查看: 8376| 评论: 0|原作者: dasi

摘要: 这一节我们将学习进度条ProgressBar的内容......

前言

不知道大家注意没有,当下载一首歌曲或者安装某个软件的时候,通常界面上会显示一个进度条,提示现在的下载或者是安装进度。我们这一节要讲的ProgressBar,也是这样的一种用途。

ProgressBar的概念

ProgressBar表示操作的进度。进度由value定期更新,范围有from和to定义,两者都可以包含任何值。因为ProgressBar属于控件,所以我们在使用时,需要导入控件类。
import QtQuick.Controls 2.3

ProgressBar还可以支持特殊的indeterminate模式,当无法确定正在下载的项目大小,或者由于网络断开而导致下载进度中断时,这种模式很有用。这样说大家可能不太能够理解,没有关系,后面我们会给出例程。

ProgressBar的属性

  • from:(real,默认为0.0),范围的起始值
  • to:(real,默认为1.0),范围的结束值
  • value:(real,默认为0.0)
  • indeterminate:(bool,默认为false)
    此属性保存进度条是否处于不确定模式,不确定模式下的进度条显示操作正在进行,但未显示已经进行了多少进度。
  • position:(real)
    只读属性,控制进度条的逻辑位置,范围0.0-1.0
  • visualPosition:(real)
    只读属性,控制进度条的视觉位置,范围0.0-1.0

例程练习

结合上一节讲的布局管理,我们在界面上展示几种不同的ProgressBar,首先,先来一种最简单的,静态ProgressBar。新建一个工程,输入以下代码。
Column{
        anchors.centerIn: parent
        anchors.margins: 50
        spacing: 50
        //进度条1
        ProgressBar{
            from: 0.0
            to:0.6
            value: 0.3
            width: 100
            height: 20
        }
    }

在Column定位器中先放置第一种进度条,长度为100,范围从0.0-0.6,进度值为0.3,所以效果应该是一个50%的进度条。如下图所示。

这种属于静态的进度条,那么动态的如何实现呢?这就需要结合之前学过的定时器事件了,可以通过1s更新一次value值的方式实现一个动态的进度条。还是在Column定位器中添加第二种进度条。

    //进度条2
    ProgressBar{
        value: 0.1
        width: 100
        height: 2
        Timer{
           interval: 1000
           repeat: true
           running: true
           onTriggered: {
                if(parent.value < 1.0){
                    parent.value += 0.1
                }else{
                    stop()
                }
           }
        }
    }

设置一个1s触发一次的定时器,每次触发时,判断当前的进度值是否大于最大值1.0,大于1.0就停止定时器,没有的话进度值就一直累加,实现一个1s变化一次的进度条。实现效果如下。

前面说到,ProgressBar还支持特殊的indeterminate模式。当我们无法确定项目下载的进度值是多少时,盲目的等待只会加重用户的焦躁,而这种模式正是为了减缓焦虑感的。实现方法也很简单,只需要将indeterminate属性设置为true即可。

//进度条3
            ProgressBar{
                value: 0.2
                width: 100
                height: 20
                //当indeterminte设置为真实, ProcessBar变成了BusyIndicator了
                indeterminate: true
             }

运行程序,效果如下。

最后一种当然就是我们的自定义的进度条控件了,可以设置进度条的颜色和样式,这里我们通过官方例程来讲解一下。

  //进度条4
    ProgressBar{
        id:control
        value: 0.2
        width: 100
        height: 2
        background: Rectangle {
            implicitWidth: control.width
            implicitHeight: control.height
            color: "orange"
            radius: 3
        }
        
        contentItem: Item {
            Rectangle {
                width: control.visualPosition * control.width
                height: control.height
                radius: 2
                color: "green"
            }
        }
     }

ProgressBar也有两个可视项:background和contentitem,先来设置background背景项,其宽和高等于ProgressBar的宽和高,颜色为orange,圆滑度为3。大家可以先运行看看,ProgressBar变成了橘黄色的矩形。然后再来设置contentitem内容项,宽度的计算公式为ProgressBar的视觉位置*ProgressBar的宽度。高度随便,颜色和平滑度也可以自行设置。OK!运行效果看一下

注:效果可能因为qt的版本有轻微的差别。

总结


ProgressBar的内容我们就讲到这里了,大家也可以根据自己的需求设置自定义样式的进度条,赶快动手练习一下吧!我们下节再会。

224

顶一下

刚表态过的朋友 (224 人)

相关阅读

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2024-11-11 09:36 , Processed in 0.013393 second(s), 13 queries .

返回顶部