Тип QML GaugeStyle
Предоставляет настраиваемую стилизацию для Gauge. Подробнее...
| Заявление об импорте: | import QtQuick.Controls.Styles 1.4 |
| С тех пор: | Qt 5.5 |
Свойства
- background : Компонент
- control : Gauge
- foreground : Компонент
- minorTickmark : Компонент
- tickmark : Компонент
- tickmarkLabel : Компонент
- valueBar : Компонент
- valuePosition : вещественное число
Подробное описание
Вы можете создать пользовательский индикатор, заменив следующие делегаты:
Ниже приведен пример того, как создать индикатор температуры, который изменяет цвет по мере увеличения его значения:
import QtQuick 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
Rectangle {
width: 80
height: 200
Timer {
running: true
repeat: true
interval: 2000
onTriggered: gauge.value = gauge.value == gauge.maximumValue ? 5 : gauge.maximumValue
}
Gauge {
id: gauge
anchors.fill: parent
anchors.margins: 10
value: 5
Behavior on value {
NumberAnimation {
duration: 1000
}
}
style: GaugeStyle {
valueBar: Rectangle {
implicitWidth: 16
color: Qt.rgba(gauge.value / gauge.maximumValue, 0, 1 - gauge.value / gauge.maximumValue, 1)
}
}
}
} Индикатор, отображающий значения в различные моменты во время анимации.
См. также Стиль Gauge.
Документация по свойствам
background : Компонент
Фон индикатора, отображаемый позади valueBar.
По умолчанию фон не определен.
[только для чтения] control : Gauge
Gauge, к которому прикреплен этот стиль.
foreground : Компонент
Полоса, представляющая переднюю часть индикатора.
Этот компонент отрисовывается поверх всех остальных компонентов.
minorTickmark : Компонент
Каждая малая риска, отображаемая индикатором.
Для установки размера малых рисок укажите implicitWidth и implicitHeight.
По соображениям компоновки каждая малая риска должна иметь одинаковую implicitHeight. Если требуются разные высоты для отдельных рисок, укажите эти высоты в дочернем элементе компонента.
В примере ниже мы уменьшаем ширину малых рисок:
minorTickmark: Item {
implicitWidth: 8
implicitHeight: 1
Rectangle {
color: "#cccccc"
anchors.fill: parent
anchors.leftMargin: 2
anchors.rightMargin: 4
}
} У каждого экземпляра этого компонента есть доступ к следующему свойству:
readonly property int styleData.index
|
Индекс этой малой риски. |
readonly property real styleData.value
|
Значение, которое представляет эта малая риска. |
readonly property real styleData.valuePosition
|
Значение, которое представляет эта малая риска, как позиция в пикселях, где 0 находится внизу индикатора. |
См. также tickmark.
tickmark : Компонент
Каждая основная риска, отображаемая индикатором.
Для установки размера рисок укажите implicitWidth и implicitHeight.
Самая широкая риска определит выделенное пространство для всех рисок. По этой причине implicitWidth каждой риски должна быть больше или равна ширине каждой малой риски. Если вам нужны малые риски с большей шириной, чем основные, установите большую ширину в дочернем элементе компонента minorTickmark.
По соображениям компоновки каждая риска должна иметь одинаковую implicitHeight. Если требуются разные высоты для отдельных рисок, укажите эти высоты в дочернем элементе компонента.
В примере ниже мы уменьшаем высоту рисок:
tickmark: Item {
implicitWidth: 18
implicitHeight: 1
Rectangle {
color: "#c8c8c8"
anchors.fill: parent
anchors.leftMargin: 3
anchors.rightMargin: 3
}
} У каждого экземпляра этого компонента есть доступ к следующим свойствам:
readonly property int styleData.index
|
Индекс этой риски. |
readonly property real styleData.value
|
Значение, которое представляет эта риска. |
readonly property real styleData.valuePosition
|
Значение, которое представляет эта риска, как позиция в пикселях, где 0 находится внизу индикатора. |
См. также minorTickmark.
tickmarkLabel : Компонент
Определяет текст каждой метки риски на индикаторе.
У каждого экземпляра этого компонента есть доступ к следующим свойствам:
readonly property int styleData.index
|
Индекс этой метки. |
readonly property real styleData.value
|
Значение, которое представляет эта метка. |
valueBar : Компонент
Полоса, представляющая значение индикатора.
Высота полосы значений автоматически изменяется в соответствии с value и не должна указываться.
При определении настраиваемого valueBar свойство implicitWidth должно быть установлено.
[только для чтения] valuePosition : вещественное число
Это свойство содержит значение, отображаемое на индикаторе, как позиция в пикселях.
Это полезно для пользовательской стилизации.
© The Qt Company Ltd
Licensed under the GNU Free Documentation License, Version 1.3.
https://doc.qt.io/qt-5.15/qml-qtquick-controls-styles-gaugestyle.html