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

Posted 2023-02-16

【中文标题】Qt Quick Controls 2.14 如何设置ScrollView的样式

【英文标题】：Qt Quick Controls 2.14 how to style ScrollView

【发布时间】：2020-09-15 17:02:16

【问题描述】：

目前尚不清楚如何设置 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 ....

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

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

【参考方案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" 
        
    

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

【讨论】：

对于ScrollBar.vertical: ScrollBar ... 的行出现错误Cannot assign a value directly to a grouped property

确保删除此行：import QtQuick.Controls.Styles 1.4。来自QQC1。

谢谢，但是当我添加 contentItem: 并将颜色设置为红色（用于测试）时进行测试，我没有看到设置了红色，甚至我的滚动指示器变得非常小并且我的列表没有滚动。

添加了代码 sn-p。我可以将样式设置为滚动条，但现在我看到两个垂直滚动条。一种符合我的风格，一种我认为是默认的。