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实现比开始制作自己的实现更简单动画。

因此，我想知道是否有一种方法可以使用“材料进度条”，但是对其进行某种处理以使圆角都变为不确定= false / true。

任何帮助将不胜感激！

Answer 1

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

此处建议的进度条包含以下组件：

圆角的矩形（位于进度栏的“槽”中）
作为矩形剪切路径

项目

该项目内的圆角矩形，用作彩色条

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

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"
        }
    }
}

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

Answer 2

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

如果仍然无法解决问题，那么仅创建进度条会更加容易。毕竟，它是一个非常琐碎且非交互的组件，具有很小的使用界面。

QT / QML带有圆角的Material ProgressBar

2 个答案: