qml listview实现循环

Posted 2023-05-18

qml listview实现循环

参考技术A 想要什么样的效果,详细一点!!

ListView 不可以做 首尾相接的循环, 首尾相接的循环 要用PathView

Item
width: 100
height: 300
ListView
id: __list
anchors.fill: parent
clip: true
model:ListModel
ListElement name: "ele"
ListElement name: "ele"
ListElement name: "ele"
ListElement name: "ele"
ListElement name: "ele"
ListElement name: "ele"
ListElement name: "ele"
ListElement name: "ele"
ListElement name: "ele"
ListElement name: "ele"
ListElement name: "ele"

delegate: Rectangle
width: ListView.view.width
height:50
border.width: 1
border.color:"black"
color:"blue"
Text
anchors.centerIn: parent
text: index


onAtYEndChanged:
if(atYEnd && contentY > 0)
timer.start()


Rectangle
id: scrollbar
anchors.right: __list.right
y: __list.visibleArea.yPosition * __list.height
width: 10
height: __list.visibleArea.heightRatio * __list.height
color: "black"


Timer
id: timer
interval: 500; running: false; repeat: false
onTriggered: __list.model.append(["name":"ele","name":"ele","name":"ele","name":"ele","name":"ele","name":"ele"])

Qml自定义组件 - ListView下拉刷新 - PullToRefreshHandler

Properties

• listView: ListView
• refreshing: bool

Signals

• refresh()

Methods

• endRefresh()

Detailed Description

此组件通过添加入ListView实现下拉刷新功能. 一旦用户将列表下拉, 直到超出某个阈值, 该组件就会发出refresh()信号, 并悬停直到endRefresh()被用户调用.

Example Usage

ListView {
    id: listView
    anchors.fill: parent
    spacing: 1

    PullToRefreshHandler {
        id: pullToRefreshHandler
        onRefresh: timer.start()
    }

    Timer {
        id: timer
        interval: 1000
        onTriggered: pullToRefreshHandler.endRefresh()
    }

    model: 10
    delegate: ItemDelegate {
        width: parent.width
        height: 50
        text: "Item " + index
    }
}

Source code

// PullToRefreshHandler.qml
import QtQuick 2.0

Item {
    id: root
    width: listView.width
    height: 50
    y: -height - listView.contentY

    readonly property bool refreshing: state == "Refreshing"
    property var listView: parent
    signal refresh()
    function endRefresh() {
        state = "Refreshed"
        listView.topMargin = 0
        listView.contentY = -height
        listView.interactive = true
        timer.start()
    }

    Timer {
        id: timer
        interval: 500
        onTriggered: listView.flick(0, 1)
    }

    Connections {
        target: listView
        onDragStarted: {
            if (state != "Refreshing") {
                _.pulling = true
            }
        }
        onDragEnded: {
            if (listView.contentY < 0) {
                listView.flickDeceleration = 0
                if (state == "PulledEnough") {
                    state = "Refreshing"
                    listView.topMargin = height
                    listView.interactive = false
                    _.pulling = false
                    refresh()
                }
            }
        }
    }

    Text {
        id: label
        anchors.centerIn: parent
    }

    states: [
        State {
            name: "PulledABit"; when: _.pulling && y < 0
            PropertyChanges {target: label; text: qsTr("Pull to refresh")}
        },
        State {
            name: "PulledEnough"; when: _.pulling && y >= 0
            PropertyChanges {target: label; text: qsTr("Release to refresh")}
        },
        State {
            name: "Refreshing"
            PropertyChanges {target: label; text: qsTr("Refreshing")}
        },
        State {
            name: "Refreshed"
            PropertyChanges {target: label; text: qsTr("Refreshed")}
        }
    ]

    QtObject {
        id: _
        property bool pulling
    }
}