带圆角的 QT/QML 材质进度条

Question

我想拥有 Material 风格的 ProgressBar 组件，但要进行一些修改以使其高度可调。 到目前为止一切顺利，我得到了我想要的结果。

所以我只是将这段代码复制到 MyPb.qml 中以将其用作组件：

import QtQuick 2.11
import QtQuick.Templates 2.4 as T
import QtQuick.Controls.Material 2.4
import QtQuick.Controls.Material.impl 2.4

T.ProgressBar {
    id: control
    property real radius: 3

    contentItem: ProgressBarImpl {
        implicitHeight: control.height

        scale: control.mirrored ? -1 : 1
        color: control.Material.accentColor
        progress: control.position
        indeterminate: control.visible && control.indeterminate
    }

    background: Rectangle {
        implicitWidth: control.width
        implicitHeight: control.height
        radius: control.radius

        color: Qt.rgba(control.Material.accentColor.r, control.Material.accentColor.g, control.Material.accentColor.b, 0.25)
    }
}

为了举例，给出了这个结果：

附上代码：

Rectangle {
    width: 600
    height: 300
    color: "black"

    MyPb {
        anchors.centerIn: parent
        id: prg
        width: 100
        height: 20
        indeterminate: false
        radius: 5
        visible: true
        value: 0.5
    }
}

由于 ProgressBarImpl 并不真正支持半径，圆角被“埋”在不透明的进度矩形下，如图所示（进度条左侧）。

现在，我不制作自己的进度条的原因是我也想要“不确定”动画。所以我以为会很多 重用 Qt 实现比开始自己制作更简单 动画。

所以我想知道是否有办法让 Material 进度条，但对其应用某种处理以在不确定 = false/true 的情况下获得圆角。

任何帮助将不胜感激！

Answer 1

请参阅 Qt 论坛中的以下帖子： https://forum.qt.io/topic/91649/make-a-round-progress-bar/7

那里提出的进度条由以下组件组成：

1. 圆角矩形表示进度条的“波谷”
2. 一个Item，作为一个矩形剪辑路径
3. 该项目内的圆形矩形，用作彩色条

根据您的问题，我得到以下代码作为概念验证：

import QtQuick 2.9

Rectangle {
    property int percentage: 40
    id: root
    width: 400
    height: 100
    radius: height / 2
    color: "#333"

    Item {
        id: cliprect
        anchors.bottom: parent.bottom
        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width * parent.percentage / 100
        clip: true

        Rectangle {
            width: root.width                        
            height: root.height 
            radius: height / 2
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            color: "#e33"
        }
    }
}

应该很容易将其移动到模板中/使其与材料属性兼容。

Answer 2

您可以尝试使用background 项目作为掩码源在contentItem 上设置OpacityMask。

如果这不起作用，创建一个进度条会更容易。毕竟它是一个非常琐碎且非交互的组件，使用界面很小。