Материал QT / QML ProgressBar с закругленными углами - PullRequest
Новая
       22

Материал QT / QML ProgressBar с закругленными углами

0 голосов
/ 01 января 2019

Я хотел бы иметь компонент ProgressBar в стиле Material, но с некоторыми изменениями, чтобы сделать его регулируемым по высоте.Пока все хорошо, у меня был результат, который я хотел.

Так что я просто скопировал этот код в 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)
    }
}

Что дает этот результат дляради примера:

enter image description here

С кодом: 

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.

Любая помощь будет оценена!

1 Ответ

0 голосов
/ 01 января 2019

Вы можете попробовать установить OpacityMask на contentItem, используя элемент background в качестве источника маски.

Если это не сработает, будет проще создать прогрессбар.Это очень простой и неинтерактивный компонент с небольшим интерфейсом использования.

...