Ярлыки

среда, 20 декабря 2017 г.

QML - vertical Slider

Если взять слайдер из примера в документации, то нам необходимо сделать несколько изменений.
1. Добавить параметр orientation: Qt.Vertical
2. Поменять формулу рассчета x и y:
y: mainVolume.topPadding + mainVolume.visualPosition * (mainVolume.availableHeight - height)
x: mainVolume.leftPadding + mainVolume.availableWidth / 2 - width / 2

If you take the slider from the example in the documentation, then you need to make a few changes.
1. Add the orientation parameter: Qt.Vertical
2. Change the calculation formula for x and y:
y: mainVolume.topPadding + mainVolume.visualPosition * (mainVolume.availableHeight - height)
x: mainVolume.leftPadding + mainVolume.availableWidth / 2 - width / 2


import QtQuick 2.6
import QtQuick.Controls 2.1

Slider {
    id: control
    value: 0.5
    orientation: Qt.Vertical

            background: Rectangle {
                x: control.leftPadding + control.availableWidth / 2 - width / 2
                y: control.topPadding
                implicitWidth: 4
                implicitHeight: 200
                width: implicitWidth
                height: control.availableHeight
                radius: 2
                color: "#bdbebf"

                Rectangle {
                    width: parent.width
                    height: control.visualPosition * parent.height
                    color: "#21be2b"
                    radius: 2
                }
            }

    handle: Rectangle {
        y: control.topPadding + control.visualPosition * (control.availableHeight - height)
        x: control.leftPadding + control.availableWidth / 2 - width / 2
        implicitWidth: 26
        implicitHeight: 26
        radius: 13
        color: control.pressed ? "#f0f0f0" : "#f6f6f6"
        border.color: "#bdbebf"
    }
}

Комментариев нет:

Отправить комментарий