Как настроить внешний вид слайдера QML?

Question

[Антон Мисягин]

Господа, помогите, деляю первые шаги на Qt. Задача изменить стиль слайдера. Не компилируется, дает ошибку

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.4

 Slider {
        from: 1
        value: 25
        to: 100
        orientation: Qt.Vertical
        anchors.centerIn: parent
        width: 100
        stepSize: 5
        style: SliderStyle {
                groove: Rectangle {
                    implicitWidth: 200
                    implicitHeight: 8
                    color: "gray"
                    radius: 8
                }
                handle: Rectangl.......

получаю ошибку Invalid property name "style" в строке:
style: SliderStyle {

пользую:
Qt Creator 4.11.1
Based on Qt 5.14.1 (GCC 5.3.1 20160406 (Red Hat 5.3.1-6), 64 bit)

Built on Feb 5 2020 12:48:30

From revision b2ddeacfb5

Copyright 2008-2019 The Qt Company Ltd. All rights reserved.

Answer 1

[Григорий]

В qml есть 2 версии QtQuick.Controls - собственно 1 и 2. По дефолту ты подключаешь 2 , а в ней стилей нет. В ней кастомизация делается по другому. Пример: Qt Doc. Как написано здесь stack чтобы все заработало как ты хочешь нужно использовать QtQuick.Controls 1 версии. Например так:

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 1.4  as QQC1
import QtQuick.Controls 2.14 as QQC2
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    QQC1.Slider {
        anchors.centerIn: parent
        style: SliderStyle {
            groove: Rectangle {
                implicitWidth: 200
                implicitHeight: 8
                color: "gray"
                radius: 8
            }
            handle: Rectangle {
                anchors.centerIn: parent
                color: control.pressed ? "white" : "lightgray"
                border.color: "gray"
                border.width: 2
                implicitWidth: 34
                implicitHeight: 34
                radius: 12
            }
        }
    }
}