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

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