当前位置：首页 > news >正文

QML学习笔记（三十六）QML的ComboBox

news 2025/10/15 6:36:10

前言

ProgressBar是一个用于显示进度条的控件，在QWidget中亦有实现，主要是为了显示某种工作流的当前进度，比如下载文件、上传文件等，特别适合有百分比进度显示的需求。

一、了解ProgressBar

查阅帮助文档：
在这里插入图片描述
翻译一下：

详细描述

ProgressBar指示操作的进度。该值应定期更新。范围由from和to定义，两者都可以包含任何值。
ProgressBar还支持一种特殊的不确定模式，例如，当无法确定正在下载的项目的大小，或者下载进度因网络断开而中断时，这种模式非常有用。不确定模式类似于BusyIndicator。两者都可以用来指示背景活动。主要区别在于视觉效果，ProgressBar还可以显示具体的进度（当可以确定时）。由于视觉差异，不确定的进度条和繁忙指示器适合用户界面中的不同位置。不确定进度条的典型位置：
·在工具栏的底部
·在页面内容中内联
·在ItemDelegate中显示特定项目的进度

二、代码测试

1.用按钮点击来触发修改

Button{text: "Start"anchors.horizontalCenter: parent.horizontalCenteronClicked: function(){progressBarId1.value = 75}
}
ProgressBar{id: progressBarId1from: 1to: 100indeterminate: trueanchors.horizontalCenter: parent.horizontalCenter
}

请添加图片描述
indeterminate: true表示当前是不确定的进度条，默认显示那种走马灯形式的进度。
这里通过一个按钮来修改进度，需要注意置位indeterminate，否则进度显示不出来。
2.用旋扭来触发修改

Dial{id: dialIdfrom: 1to: 100value: 40anchors.horizontalCenter: parent.horizontalCenteronValueChanged: function(){// ...progressBarId.value = value}
}
ProgressBar{id: progressBarIdfrom: 1to: 100value: 40anchors.horizontalCenter: parent.horizontalCenteronValueChanged: function(){console.log("Current value: " + visualPosition)console.log("Current value: " + value)}
}

Dial是一个旋扭组件，因为不太常用，我就没怎么介绍，它的写法几乎和ProgressBar一样，可以设置开始和结束的值，然后设置中间的当前值。只不过它是一个可以主动操作旋转的控件而ProgressBar是被动进行修改的。
这里模拟用Dial的旋转，来间接控制ProgressBar的进度显示。
请添加图片描述
打印也有很多：
在这里插入图片描述

console.log("Current value: " + visualPosition)
console.log("Current value: " + value)

很显然，value是我们设置的值，但必须介于from和to之间，因为这是一个范围；visualPosition则是小数形式的百分比，已经自动给我们计算出来了，如果需要这个数值的话，可以留意这个属性。

三、进度百分比文字显示

印象中，QWidget中的QProgressBar是有百分比文字的显示的，通常在进度条的右侧，这样的效果会更加直观。只可惜，qml中的百分比文字似乎并没有给我们实现。
搜索了解后发现，qml中会给我们预留visualItem 来自定义实现样式，但这是5.15之后才有的，我是5.14所以没法测试了。
建议的话，还是另外连接一个text或label吧，反正也不难。