Стиль измерителя

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