Top.Mail.Ru
Уведомления
Очистить все

[Решено] QT + QML, стиль элемента Slider

 bang
(@bang)
New member

Доброго вечера! Поделитесь, пожалуйста, у кого есть, наработками - примерами по кастомизации стиля Slider в QML. Заранее всех благодарю)

Цитата
Создатель темы Размещено : 26.11.2021 15:19
Метки темы
AI
 AI
(@ai)
Level 3 Moderator

Привет, вот Qtшный вариант:

изображение
import QtQuick 2.12
import QtQuick.Controls 2.12

RangeSlider {
    id: control
    first.value: 0.25
    second.value: 0.75

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

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

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

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

 

ОтветитьЦитата
Размещено : 26.11.2021 18:45
Aveal and bang reacted
AI
 AI
(@ai)
Level 3 Moderator
От: @ai

Привет, вот Qtшный вариант

В том смысле, что с оф.сайта пример )

ОтветитьЦитата
Размещено : 26.11.2021 18:46
 bang
(@bang)
New member

@ai а где эти примеры можно найти там?

ОтветитьЦитата
Создатель темы Размещено : 26.11.2021 19:24
Aveal
(@aveal)
Top level Admin
От: @bang

@ai а где эти примеры можно найти там?

https://doc.qt.io/qt-5/qtquickcontrols2-customize.html

ОтветитьЦитата
Размещено : 26.11.2021 21:02
 bang
(@bang)
New member

@aveal Спасибо! Как-то сам не наткнулся на эти доки пока искал...

ОтветитьЦитата
Создатель темы Размещено : 26.11.2021 21:51
Aveal
(@aveal)
Top level Admin

@bang обращайся если что )

ОтветитьЦитата
Размещено : 29.11.2021 11:59
Поделиться: