如何通过q​​tquick控件2.3自定义ScrollView

Question

我正在使用import QtQuick.Controls 2.3版的ScrollView控件，因为它看起来比以前的更好。

问题是，如果我尝试使用ScrollBar.vertical对其进行自定义，则会失去某些功能。我无法像默认情况一样按下并上下拖动它。

我已经搜索了，并且找到了一种执行拖动功能的方法。

我使用的代码是：

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Controls 2.3

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    height: 200
    width: 400
    ListModel {
        id: libraryModel
        ListElement {
            text: "A Masterpiece"
        }
        ListElement {
            text: "Brilliance"
        }
        ListElement {
            text: "Outstanding"
        }
    }

    Item {
        id: page
        anchors.fill: parent
        width:parent.width
        height: parent.height
        ScrollView {
            id:scrollView
            anchors.fill:parent
            ScrollBar.vertical: ScrollBar {
                parent: scrollView
                x: scrollView.mirrored ? 0 : scrollView.width - width
                y: scrollView.topPadding
                height: scrollView.availableHeight
                active: scrollView.ScrollBar.horizontal.active
                contentItem: Rectangle {
                    implicitWidth: 6
                    implicitHeight: 100
                    radius: width/2
                    color: scrollView.pressed ? "orange" : "green"
                }
            }
            Column{
                width:parent.width
                spacing:10
                TextField {
                    id:textField
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
                TextField {
                    id:textField2
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox2
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
                TextField {
                    id:textField3
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox3
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
                TextField {
                    id:textField4
                    anchors.topMargin: 10
                    implicitHeight: 30
                    font.bold: true
                }
                ComboBox {
                    id:comboBox4
                    anchors.topMargin: 10
                    textRole: "text"
                    model: libraryModel
                }
            }
        }
    }
}

我错过了代码什么？也许在ScrollBar上？

Answer 1

如果将z: 1设置为ScrollBar（或任何大于0的值），则该问题应得到解决。

我不确定原因，但看起来它与默认情况下附加到ScrollView的滚动条有关，这阻止您访问此10px区域中的自定义滚动条。

cf Why is there a dead zone on the right side of my flipable?

Answer 2

我已通过为ScrollBar（link）设置其他父项来解决此问题。另外，要更改颜色，您需要检查ScrollBar属性而不是ScrollView：

        ScrollBar.vertical: ScrollBar {
            id: scrollBar
            parent: scrollView.parent
            policy: ScrollBar.AlwaysOn
            x: scrollView.mirrored ? 0 : scrollView.width - width
            y: scrollView.topPadding
            height: scrollView.availableHeight
            active: scrollView.ScrollBar.horizontal.active
            contentItem: Rectangle {
                implicitWidth: 6
                implicitHeight: 100
                radius: width/2
                color: scrollBar.pressed ? "orange" : "green"
            }
        }