Тип QML GaugeStyle

Предоставляет настраиваемую стилизацию для Gauge. Подробнее...

• Список всех членов, включая унаследованные

Свойства

• background : Компонент
• control : Gauge
• foreground : Компонент
• minorTickmark : Компонент
• tickmark : Компонент
• tickmarkLabel : Компонент
• valueBar : Компонент
• valuePosition : вещественное число

Подробное описание

Вы можете создать настраиваемый индикатор, заменив следующие делегаты:

• background
• valueBar
• tickmarkLabel

Ниже приведен пример создания индикатора температуры, меняющего цвет по мере увеличения значения:

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

Индикатор, отображающий значения в различные моменты анимации.

См. также Стиль индикатора.

Документация по свойствам

background : Component

Фон индикатора, отображаемый позади valueBar.

По умолчанию фон не определен.

[только для чтения] control : Gauge

Индикатор Gauge, к которому прикреплен данный стиль.

foreground : Component

Линия, представляющая передний план индикатора.

Этот компонент отрисовывается поверх всех остальных компонентов.

minorTickmark : Component

Каждый малый деления, отображаемый индикатором.

Чтобы задать размер малых делений, укажите implicitWidth и implicitHeight.

По причинам компоновки каждое малое деление должно иметь одинаковую implicitHeight. Если требуются разные высоты для отдельных делений, укажите эти высоты в дочернем элементе компонента.

В примере ниже мы уменьшаем ширину малых делений:

minorTickmark: Item {
    implicitWidth: 8
    implicitHeight: 1

    Rectangle {
        color: "#cccccc"
        anchors.fill: parent
        anchors.leftMargin: 2
        anchors.rightMargin: 4
    }
}

Каждый экземпляр этого компонента имеет доступ к следующему свойству:

См. также tickmark.

tickmark : Component

Каждое деление, отображаемое на индикаторе.

Чтобы задать размер делений, укажите implicitWidth и implicitHeight.

Самое широкое деление определит место, отведенное для всех делений. По этой причине implicitWidth каждого деления должно быть больше или равно таковому для каждого малого деления. Если вам нужны малые деления с большей шириной, чем основные, установите большую ширину в дочернем элементе компонента minorTickmark.

По причинам компоновки каждое деление должно иметь одинаковую implicitHeight. Если требуются разные высоты для отдельных делений, укажите эти высоты в дочернем элементе компонента.

В примере ниже мы уменьшаем высоту делений:

tickmark: Item {
    implicitWidth: 18
    implicitHeight: 1

    Rectangle {
        color: "#c8c8c8"
        anchors.fill: parent
        anchors.leftMargin: 3
        anchors.rightMargin: 3
    }
}

Каждый экземпляр этого компонента имеет доступ к следующим свойствам:

См. также minorTickmark.

tickmarkLabel : Component

Это определяет текст каждой метки деления на индикаторе.

Каждый экземпляр этого компонента имеет доступ к следующим свойствам:

valueBar : Component

Линия, представляющая значение индикатора.

Высота valueBar автоматически перестраивается в соответствии с value и не требует явного указания.

Если пользователь определяет собственный valueBar, его свойство implicitWidth должно быть установлено.

[только для чтения] valuePosition : real

Это свойство содержит значение, отображаемое на индикаторе, как позицию в пикселях.

Полезно для настраиваемой стилизации.