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是一種非常有用的組件，它可以用來重複顯示數據和動態生成組件。在實際開發中，我們可以更好地利用這個組件來實現更高效的重複展示效果。