Qt Quick Controls 2.14 如何设置ScrollView的样式

Question

目前尚不清楚如何设置 QML ScrollView 的样式。
我希望 ScrollView 具有以下样式，但将错误 style 作为无效属性。

import QtQuick 2.0
import QtQuick.Controls 2.14
import QtQuick.Controls.Styles 1.4

ScrollView {
    style: ScrollViewStyle {
        handle: Rectangle {
            implicitWidth: 50
            implicitHeight: 30
            color: "red"
        }
        scrollBarBackground: Rectangle {
            implicitWidth: 50
            implicitHeight: 30
            color: "black"
        }
        decrementControl: Rectangle {
            implicitWidth: 50
            implicitHeight: 30
            color: "green"
        }
        incrementControl: Rectangle {
            implicitWidth: 50
            implicitHeight: 30
            color: "blue"
        }
    }
    //...
}

更新：

import QtQuick 2.0
import QtQuick.Controls 2.14

ScrollView {
    id: myScrollView
    width: 700
    height: parent.height
    clip: true

    ScrollBar.vertical: ScrollBar {
        id: scrollBar
        parent: myScrollView.parent
        policy: ScrollBar.AlwaysOn
        anchors.top: myScrollView.top
        anchors.left: myScrollView.right
        anchors.bottom: myScrollView.bottom
        height: myScrollView.availableHeight

        contentItem: Rectangle {
            implicitWidth: 16
            implicitHeight: 10
            anchors.leftMargin: 10

            radius: 16
            color: "blue"
        }
    }

    ListView {
        id: myListView
        anchors.fill: parent

    .... Rest of the code ....

通过上面的代码，我可以获得垂直滚动条的样式，但是通过这段代码，我看到了两个滚动条。一种是浅灰色的，尺寸很小，一种是蓝色的，按照上面的样式。

蓝色滚动条的高度也不符合样式。

Answer 1

您将 Qt Quick Controls 1 与 Qt Quick Controls 2 混淆了。QQC2 不使用style 属性。这是docs。 ScrollView 的基本思想是您可以更改 background 以及附加的 ScrollBar。

ScrollView {
    background: ... // This changes what's drawn in the background

    ScrollBar.vertical: ScrollBar { ... }
    ScrollBar.horizontal: ScrollBar { ... }
}

ScrollBar 本身也可以通过更改background 或contentItem 来自定义。

ScrollBar {
    background: ... // Change the background of the scrollbar
    contentItem: ... // Change the scroll indicator
}

更新：实际上，我在尝试时看到了与您相同的行为。我只是在关注文档，所以那里可能存在 Qt 错误。好消息是，由于您只是想滚动ListView，ScrollView 实际上是不必要的。你可以这样做：

    ListView {
        id: listView
        width: 200
        height: 200
        model: 100
        clip: true
        delegate: ItemDelegate {
            text: modelData
        }

        ScrollBar.vertical: ScrollBar {
            background: Rectangle { color: "red" }
            contentItem: Rectangle { implicitWidth: 10; implicitHeight: 10; color: "blue" }
        }
    }

这次我自己试过了，效果很好。