Стиль шкалы

Поскольку документация к 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"
                }
            }
        }
    }
}