Стиль шкалы

Так как документация GaugeStyle достаточно подробно описывает распространенные случаи использования, этот учебник рассмотрит другой сценарий: тот, где метки шкалы покрывают полосу значения, а не выравниваются слева или справа от неё.

Компонент полосы значения

Компонент valueBar изменяет свой размер в соответствии со значением шкалы; если значение низкое, полоса будет небольшой, и наоборот.

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

valueBar: Rectangle {
    color: "#e34c22"
    implicitWidth: 28
}

Как указано в документации для GaugeStyle, implicitWidth необходимо установить при определении собственной полосы значения.

Компонент переднего плана

Компонент foreground занимает всю ширину и высоту полосы значения, даже когда полоса значения не максимальна. По умолчанию компонент переднего плана обеспечивает "блеск". Мы выберем отказ от этого и оставим его пустым:

foreground: null

Компонент деления

Компонент tickmark расположен слева или справа от полосы значения в зависимости от tickmarkAlignment элемента управления. Чтобы метки шкалы покрывали ширину полосы значения, необходимо выполнить два действия:

1. Удалить пространство, которое занимали метки шкалы, чтобы оставалось только достаточное пространство для отступов между метками шкалы и полосой значения.
2. Разместить метки шкалы в соответствии с ориентацией элемента управления и выравниванием меток.

tickmark: Item {
    implicitWidth: 8
    implicitHeight: 4

    Rectangle {
        x: control.tickmarkAlignment === Qt.AlignLeft
            || control.tickmarkAlignment === Qt.AlignTop ? parent.implicitWidth : -28
        width: 28
        height: parent.height
        color: "#ffffff"
    }
}

В этом случае мы выбрали отступы в 8 пикселей, поэтому мы установили implicitWidth меток шкалы на это значение.

Мы учитываем все возможные ориентации и выравнивания меток, что не является необходимым, если шкала будет иметь только одну ориентацию и выравнивание. Например, если шкала всегда будет вертикальной ориентации и метки будут выровнены слева, то достаточно установить свойство x компонента Rectangle следующим образом:

x: parent.implicitWidth

Ширина полосы значения составляет 28 пикселей, поэтому мы задаём такую же ширину меткам шкалы, чтобы они покрывали всю её ширину.

Компонент вспомогательной метки

Компонент minorTickmark почти идентичен своему более крупному аналогу, за исключением того, что его ширина не влияет на расположение компонентов шкалы. Мы выполним аналогичные корректировки, что и в предыдущем разделе – единственное отличие в высоте:

minorTickmark: Item {
    implicitWidth: 8
    implicitHeight: 2

    Rectangle {
        x: control.tickmarkAlignment === Qt.AlignLeft
            || control.tickmarkAlignment === Qt.AlignTop ? parent.implicitWidth : -28
        width: 28
        height: parent.height
        color: "#ffffff"
    }
}

Изменение размера шрифта

Наконец, мы увеличиваем размер шрифта font до 15 пикселей:

font.pixelSize: 15

Полный исходный код

import QtQuick 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4

Rectangle {
    width: 100
    height: 220
    color: "#494d53"

    Gauge {
        value: 50
        tickmarkStepSize: 20
        minorTickmarkCount: 1
        font.pixelSize: 15
        anchors.centerIn: parent
        anchors.horizontalCenterOffset: -4

        style: GaugeStyle {
            valueBar: Rectangle {
                color: "#e34c22"
                implicitWidth: 28
            }

            foreground: null

            tickmark: Item {
                implicitWidth: 8
                implicitHeight: 4

                Rectangle {
                    x: control.tickmarkAlignment === Qt.AlignLeft
                        || control.tickmarkAlignment === Qt.AlignTop ? parent.implicitWidth : -28
                    width: 28
                    height: parent.height
                    color: "#ffffff"
                }
            }

            minorTickmark: Item {
                implicitWidth: 8
                implicitHeight: 2

                Rectangle {
                    x: control.tickmarkAlignment === Qt.AlignLeft
                        || control.tickmarkAlignment === Qt.AlignTop ? parent.implicitWidth : -28
                    width: 28
                    height: parent.height
                    color: "#ffffff"
                }
            }
        }
    }
}