qml中Repeter类型的使用

1、批量生成多个简单项

import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQml 2.12

Window {
    id: window
    objectName: "myWindow"
    visible: true
    width: 600
    height: 250
    title: qsTr("Hello World")

    Column {
        Repeater {
            model: 4
            Text {
                text: "I'm item " + index
            }
        }
    }
}

2、批量生车工多个复杂项

import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQml 2.12

Window {
    id: window
    objectName: "myWindow"
    visible: true
    width: 600
    height: 250
    title: qsTr("Hello World")

    property var dataList: [{
            "icon": "recommend-white",
            "value": "推荐内容",
            "page": "../pages/DetailRecommendPageView"
        }, {
            "icon": "cloud-white",
            "value": "搜索音乐",
            "page": "../pages/DetailSearchPageView"
        }, {
            "icon": "local-white",
            "value": "本地音乐",
            "page": "../pages/DetailLocalPageView"
        }, {
            "icon": "history-white",
            "value": "播放历史",
            "page": "../pages/DetailHistoryPageView"
        }, {
            "icon": "favorite-big-white",
            "value": "我喜欢的",
            "page": "../pages/DetailFavoritePageView"
        }]

    Column {
        spacing: 10

        Repeater {
            model: dataList

            // 复杂的委托
            Column {
                Text {
                    text: modelData.icon
                }
                Button {
                    text: modelData.value
                    Component.onCompleted: {
                        console.log("===> index:> " + index + "  " + modelData.value)
                    }
                }
            }
        }
    }
}

3、modelData属性和index属性

index

modelData