Question

我想在TableView中自定义ScrollBar 我能够在ListView和GridView中自定义ScrollBar，但我无法对TableView进行相同的操作。

我发现这是因为GridView和ListView继承自Flickable，但TableView继承自ScrollView。有没有替代方案呢？

TableView {
    id:songGrid
    TableViewColumn {
        role: "title"
        title: "Title"
        width: 100
    }
    TableViewColumn {
        role: "author"
        title: "Author"
        width: 200
    }


    ScrollBar.horizontal:  ScrollBar {
        id: scrollBar2
        anchors.bottom:  songGrid.bottom
        //            anchors.bottomMargin: 70*downscaleFactor
        width: 5
        active: true
        visible:songGrid.moving?true:false

        contentItem: Rectangle {
            id:contentItem_rect2
            width:100
            implicitHeight:4
            radius: implicitHeight/2
            color: "Red"
        }
    }

    model: libraryModel1
}


ListModel {
    id: libraryModel1
    ListElement {
        title: "A Masterpiece"
        author: "Gabriel"
    }
    ListElement {
        title: "Brilliance"
        author: "Jens"
    }
    ListElement {
        title: "Outstanding"
        author: "Frederik"
    }
}

Answer 1

你可以创建一个ScrollBar，把它放在任何你想要的地方。然后以正确的方式将songGrid.flickableItem.contentX/Y绑定到ScrollBar.position。如果TableView可以通过其他方式移动，则ScrollBar您需要使用第二个Binding来更新position。

这是一个简短的草图，我只考虑方向：ScrollBar -> TableView（将其添加到问题的代码中）。

Binding {
    target: songGrid.flickableItem
    property: "contentY"
    value: (songGrid.flickableItem.contentHeight + 16) * vbar.position - (16 * (1 - vbar.position))
}

ScrollBar {
    id: vbar
    z: 100
    orientation: Qt.Vertical
    anchors.top: songGrid.top
    anchors.left: songGrid.right
    anchors.bottom: songGrid.bottom
    active: true
    contentItem: Rectangle {
        id:contentItem_rect2
        radius: implicitHeight/2
        color: "Red"
        width: 10 // This will be overridden by the width of the scrollbar
        height: 10 // This will be overridden based on the size of the scrollbar
    }
    size: (songGrid.height) / (songGrid.flickableItem.contentItem.height)
    width: 10
}

您可以在16中看到神秘的 Binding。这是需要的一些偏移量，可能是为了解释水平ScrollBar。对于不同的样式/平台，这可能会有所不同。

如果您还有其他问题，请提出新问题。如果您只需要进一步澄清，请发表评论。

Answer 2

您可以使用Qt Quick Controls Styles QML Types更改滚动条的外观。

TableView的{{1}}属性继承自style。要自定义滚动条，只需覆盖它。

这是一个简单的例子。

ScrollView

您还可以更改scorllbar的背景，增加/减少按钮的外观......等。有关详细信息，请参阅 ScrollViewStyle QML Type（import QtQuick 2.9 import QtQuick.Controls 2.2 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 TableView { id: songGrid TableViewColumn { role: "title" title: "Title" width: 100 } TableViewColumn { role: "author" title: "Author" width: 200 } model: libraryModel1 style: TableViewStyle { handle: Rectangle { implicitHeight: 17 color: "red" } } ListModel { id: libraryModel1 ListElement { title: "A Masterpiece" author: "Gabriel" } ListElement { title: "Brilliance" author: "Jens" } ListElement { title: "Outstanding" author: "Frederik" } } }的父类）

顺便说一句，如果你想创建一个新的滚动条TableViewStyle，你可以设置derM或horizontalScrollBarPolicy到verticalScrollBarPolicy来禁用默认滚动条。这两个属性是来自ScrollView

如何在QML中为TableView创建自定义滚动条？

2 个答案: