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

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 ，把它放在你想要的任何地方。然后你绑定(bind)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 .这是需要的一些偏移量，可能是为了说明水平滚动条。对于不同的样式/平台，这可能会有所不同。

If you have further questions, please ask a new question. If you only need more clarification, place a comment.