QML Repeater详解

一、qmlrepeater的基本概念

QML Repeater是一种用于生成多个实例的组件。它会根据model的数量创建对应数量的component，使得这些组件在显示界面上看起来是相同的。这个组件主要用于将一些重复的界面元素生成多次，减少重复的代码。QObjectListModel是一种非常适合用于QML Repeater的model，它可以提供用于QML视图的QObjects。

import QtQuick 2.0

Item {
    width: 200; height: 200

    ListModel {
        id: fruitModel
        ListElement { text: "Banana" }
        ListElement { text: "Apple" }
        ListElement { text: "Pear" }
    }

    Repeater {
        model: fruitModel
        delegate: Text {
            text: model.text
            font.bold: true
            font.pointSize: 20
        }
    }
}

上面这个例子中，我们创建了一个ListModel，然后使用Repeater将这个model重复展示了三次，并且放置了一个Text类型的delegate，实现了三个Item的重复显示。

二、qmlrepeater中的属性

1、model: 当我们想让一些元素重复展示时，需要指定这些元素对应的model。该属性可以是任意源的model，如QObjectListModel、ListModel、XMLListModel等，型号可以是JavaScript函数、字符串、数组等，如ListElement。

ListModel {
    id: fruitModel
    ListElement { text: "Banana" }
    ListElement { text: "Apple" }
    ListElement { text: "Pear" }
}

Repeater {
    model: fruitModel
    delegate: Rectangle { }
}

2、delegate: delegate属性定义了model中重复的每个元素的表示方式。这通常是一个Item，但也可以是其他任何组件，包括User Defined Components。当创建一个delegate组件时，我们可以引用model的任何属性，例如，如果model有一个’myText’属性，我们可以在delegate中使用’model.myText’来引用它。

ListModel {
    id: fruitModel
    ListElement { text: "Banana" }
    ListElement { text: "Apple" }
    ListElement { text: "Pear" }
}

Repeater {
    model: fruitModel
    delegate: Text { text: model.text }
}

3、index: index属性提供了delegate的重复次序，也就是在开始创建delegate实例时其代表的model的顺序,逐个按顺序递增，下标从0开始。

ListModel {
    id: fruitModel
    ListElement { text: "Banana" }
    ListElement { text: "Apple" }
    ListElement { text: "Pear" }
}

Repeater {
    model: fruitModel
    delegate: Text { text: index + ": " + model.text }
}

4、property: delegate中使用的所有属性都属于delegate实例的属性。使用property声明的属性是可以使用在delegate实例中的。

ListModel {
    id: fruitModel
    ListElement { text: "Banana" }
    ListElement { text: "Apple" }
    ListElement { text: "Pear" }
}

Repeater {
    model: fruitModel
    delegate: Rectangle {
        property var fruit: model
        Text { text: fruit.text }
    }
}

在上面例子中，我们声明了一个’fruit’属性来引用model元素，这样就可以在delegate中使用它。

三、qmlrepeater的应用场景

1、多行数据的显示：使用Repeater可以在界面上重复显示来自model的多行数据。

ListModel {
    id: namesModel
    ListElement { firstName: "Tom"; lastName: "Smith" }
    ListElement { firstName: "Mary"; lastName: "Jones" }
    ListElement { firstName: "Mark"; lastName: "Brown" }
}

Repeater {
    model: namesModel
    delegate: Text {
        text: model.firstName + " " + model.lastName
    }
}

2、根据model动态生成组件：可以使用Repeater来根据model动态生成组件。例如，您可以使用switch语句根据model中的任何属性定义要创建的组件类型。

ListModel {
    id: fruitModel
    ListElement { type: "banana" }
    ListElement { type: "apple" }
    ListElement { type: "pear" }
}

Repeater {
    model: fruitModel
    delegate: Rectangle {
        property var fruitType: model.type
        Switch {
            Case { when: fruitType === "banana"; Text { text: "I am banana" } }
            Case { when: fruitType === "apple"; Text { text: "I am apple" } }
            Case { when: fruitType === "pear"; Text { text: "I am pear" } }
        }
    }
}

3、动态生成文件列表：Repeater可以用于根据文件列表动态生成界面。

ListModel {
    id: fileListModel
}

function populateFileList() {
    fileListModel.clear();
    var files = fileSystem.directoryListing(directory);
    for (var i = 0; i < files.length; i++)
        fileListModel.append({ fileName: files[i] });
}

Repeater {
    model: fileListModel
    delegate: Text {
        text: model.fileName
    }
}

上述代码使用Delegate实现了根据文件列表动态生成的界面。

四、conclusion

通过本文的介绍，我们了解了qmlrepeater的基本概念、属性和一些应用场景。QML Repeater是一种非常有用的组件，它可以用来重复显示数据和动态生成组件。在实际开发中，我们可以更好地利用这个组件来实现更高效的重复展示效果。