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` 来计算字体大小。