qml写一个好看的水波纹进度条
时间: 2023-07-01 22:05:08 浏览: 89
以下是一个使用 QML 实现的水波纹进度条:
```qml
import QtQuick 2.12
import QtQuick.Controls 2.12
Item {
width: 200
height: 200
property double progress: 0.5
Rectangle {
id: background
width: parent.width
height: parent.height
color: "#efefef"
}
Item {
id: content
anchors.centerIn: parent
width: parent.width * 0.8
height: parent.height * 0.8
Rectangle {
anchors.fill: parent
color: "#ffffff"
border.color: "#cccccc"
border.width: 1
ProgressBar {
id: progressBar
anchors.centerIn: parent
width: parent.width * 0.8
height: parent.height * 0.8
value: progress
minimumValue: 0
maximumValue: 1
style: ProgressBarStyle {
background: Rectangle {
color: "transparent"
}
progress: Rectangle {
color: "#0080ff"
}
}
}
ShaderEffect {
id: waveShader
anchors.fill: progressBar
property variant source: progressBar
property real progress: progressBar.value
fragmentShader: "
varying highp vec2 qt_TexCoord0;
uniform sampler2D source;
uniform highp float progress;
uniform highp float waveAmplitude;
uniform highp float waveFrequency;
uniform highp float waveSpeed;
void main() {
highp vec2 st = qt_TexCoord0.st;
st.y += (sin(st.x * waveFrequency + progress * waveSpeed) + sin(st.x * waveFrequency * 1.5 + progress * waveSpeed * 1.5)) * waveAmplitude * (1.0 - progress);
gl_FragColor = texture2D(source, st);
}
"
property real waveAmplitude: 0.05
property real waveFrequency: 6.0
property real waveSpeed: 0.1
ShaderEffectSource {
sourceItem: source
hideSource: true
}
}
}
Text {
id: label
anchors.centerIn: parent
text: (progress * 100).toFixed(0) + "%"
font.pixelSize: content.width * 0.2
}
}
}
```
在这个例子中,我们创建了一个 `Item` 来包含整个进度条。这个 `Item` 中包含了一个灰色的背景矩形和一个居中的进度条。进度条使用了 `ProgressBar` 控件,并使用了自定义的进度条样式 `ProgressBarStyle`。这个样式中包含了两个矩形,分别用来表示进度条的背景和进度。
通过 `ShaderEffect` 来实现水波纹效果。这个 `ShaderEffect` 接受一个来自进度条 `ProgressBar` 的纹理,并对纹理进行处理来产生水波纹效果。你可以通过调整 `waveAmplitude`、`waveFrequency` 和 `waveSpeed` 来控制水波纹的幅度、频率和速度。在处理纹理时,我们使用了 sin 函数来计算水波纹的高度。
最后,我们在进度条中央添加了一个文本框,用来显示当前进度的百分比。这个文本框使用了 `Text` 控件,并通过 `content.width` 来计算字体大小。
阅读全文