【Qt Quick】ListView

示例

.qml

Component{
        id:record_Com
        Button{
            id:btn
            width: parent.width-25
            height: 40
            Text {
                text: name
                anchors.verticalCenter: parent.verticalCenter
                font{
                    pointSize: 18
                    bold: true
                }
                color: "red"
            }
            background: Rectangle{
                color: parent.pressed?"light gray":"sky blue"
                radius: 5
            }


            onClicked: {
                console.log("当前点击下标:"+index)
                //当前数据条的详细数据赋值
                information_TE.text = $J.getCurrentData(index)
                //详细数据窗口显示
                details_Rec.visible = true
                //列表窗口隐藏
                record_ListView.visible = false
            }

        }
    }
    ListView{
        id:record_ListView
        anchors.fill: parent
        spacing: 5
        clip: true
        focus: true
        delegate: record_Com
        model: record_model

        ScrollBar.vertical: ScrollBar {
            id: scrollBar
            visible: false
            hoverEnabled: true
            active: hovered || pressed
            orientation: Qt.Vertical
            //size: 0.8
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            contentItem: Rectangle  {
                implicitWidth: 20
                implicitHeight: 50
                radius: width / 2
                color: scrollBar.pressed ? "#81e889" : "#c2f4c6"
            }
        }

    }

    ListModel{id:record_model;}

---

回滚

1. 回滚到头部

ListView的id.positionViewAtBeginning()

2. 回滚到底部

ListView的id.positionViewAtEnd()

3. 回滚到指定行

ListView的id.positionViewAtIndex(int index, PositionMode mode)

参数

下标

将内容回滚到哪个位置

• ListView的id.Beginning - 列表头部

• ListView的id.Center - 列表中心位置

• ListView的id.End - 列表底部