• QML Repeater


    简介

    Repeater 是一个非常特别又非常好用的类,它用来创建多个基于 Item 的组件,扔给它的 parent(通常是定位器或布局管理器)来管理。这是 Repeater 和 ListView 等类的一个显著不同。

    Repeater 有三个属性,count 指示它创建了多少个基于 Item 的对象,model 指定数据模型, delegate 是待实例化的组件。delegate 是默认属性,在定义 Repeater 对象时通常不显式初始化。 itemAt(index)方法根据索引返回对应的 delegate 实例。

    Repeater 对象会在自己实例化后一次性地创建由 model 决定的所有 Item,这在某些情况下可能会被认为效率低下。比如 model 提供了 10000 个数据,Repeater 就实例化 10000 个 delegate 组件。如果你对这个敏感,可以使用 ListView,它创建 Item 是渐进式的,一开始只 创建少量的 Item,足够界面显示,当用户滚动 ListView,那些原本不可见的 Item 要被显示时 才会适时创建。

    model 属性可以取下列值:

    • 数字
    • 字符串列表
    • 对象列表
    • ListModel 等常见的 model

    咱们一个个来看吧。

    model 为数字

    model 为数字时指示 Repeater 创建特定数量的组件,此时在 delegate 组件内可以访问 index 属性。

    简单示例 repeater_number.qml:

    import QtQuick 2.2
    import QtQuick.Layouts 1.1
    
    Rectangle {
         400
        height: 200
        color: "#EEEEEE"
    
        RowLayout {
            anchors.fill: parent
            spacing: 4
            Repeater {
                model: 8
                Rectangle {
                     46
                    height: 30
                    color: "steelblue"
                    Text {
                        anchors.fill: parent
                        color: "black"
                        font.pointSize: 14
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        text: index
                    }
                }
            }
        }
    }
    

    model 取值 8,delegate 是内嵌一个 Text 对象的 Rectangle 对象,Text 对象显示索引。我使用 RowLayout 作为 Repeater 的 parent。效果图如下所示:


    model为字符串列表

    当使用字符串列表作为 model 时,Repeater 创建的 Item 数量由列表长度决定,在 delegate 内可以通过 modelData 访问字符串对象。

    import QtQuick 2.2
    import QtQuick.Layouts 1.1
    
    Rectangle {
         300
        height: 200
        color: "#EEEEEE"
    
        Row {
            anchors.centerIn: parent
            spacing: 8
            Repeater {
                model: ["Hello", "Qt", "Quick"]
                Text {
                    color: "blue"
                    font.pointSize: 18
                    font.bold: true
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: modelData
                }
            }
        }
    }
    

    这里使用 Row 作为 Repeater 的 parent。delegate 非常简单,就是个 Text 对象。使用 qmlscene 加载 repeater_stringlist.qml,效果图如下所示:


    model为对象列表

    使用对象列表作为 model 与使用字符串列表类似,只是 modelData 代表 model 中的对象: 直接看 repeater_objects.qml:

    import QtQuick 2.2
    
    Rectangle {
         320
        height: 200
        color: "#EEEEEE"
    
        Column {
            anchors.fill: parent
            anchors.margins: 4
            spacing: 4
            Repeater {
                model: [
                    {"name":"Zhang San", "mobile":"13888888888"},
                    {"name":"Wang Er", "mobile":"13999999999"},
                    {"name":"Liu Wu", "mobile":"15866666666"},
                ]
                Row {
                    height: 30
                    Text{
                         100
                        color: "blue"
                        font.pointSize: 13
                        font.bold: true
                        verticalAlignment: Text.AlignVCenter
                        text: modelData.name
                    }
                    Text{
                         200
                        font.pointSize: 13
                        verticalAlignment: Text.AlignVCenter
                        text: modelData.mobile
                    }
                }
            }
        }
    }
    

    注意,在 delegate 内将 modelData 作为对象使用,直接访问它的属性,效果图如下所示:


    model为ListModel

    model 也可以是 ListModel 或者 QAbstractltemModel 的派生类。此时在 delegate 内可以通过 role-name 访问 model 内的数据。

    repeaterlistmodel.qml 展示了如何使用 ListModel:

    import QtQuick 2.2
    
    Rectangle {
         300
        height: 200
        color: "#EEEEEE"
    
        Column {
            anchors.fill: parent
            anchors.margins: 4
            spacing: 4
            Repeater {
                model: ListModel {
                    ListElement{
                        name: "MI4"
                        cost: "1999"
                        manufacturer: "Xiaomi"
                    }
                    ListElement{
                        name: "MX4"
                        cost: "1999"
                        manufacturer: "Meizu"
                    }
                    ListElement{
                        name: "iPhone6"
                        cost: "5500"
                        manufacturer: "Apple"
                    }
                    ListElement{
                        name: "C199"
                        cost: "1599"
                        manufacturer: "Huawei"
                    }
                }
                Row {
                    height: 30
                    Text{
                         120
                        color: "blue"
                        font.pointSize: 14
                        font.bold: true
                        verticalAlignment: Text.AlignVCenter
                        text: name
                    }
                    Text{
                         100
                        font.pointSize: 14
                        verticalAlignment: Text.AlignVCenter
                        text: cost
                    }
                    Text{
                         100
                        font.pointSize: 12
                        verticalAlignment: Text.AlignVCenter
                        text: manufacturer
                    }
                }
            }
        }
    }
    

    效果图如下所示:


  • 相关阅读:
    hdu 1588 求f(b) +f(k+b) +f(2k+b) +f((n-1)k +b) 之和 (矩阵快速幂)
    poj 3233 S = A + A^2 + A^3 + … + A^k A是一个n X n矩阵 (矩阵快速幂)
    hdu 1757 和1005差不多 (矩阵快速幂)
    D 矩阵快速幂
    poj 3734 方块涂色 求红色 绿色方块都为偶数的方案数 (矩阵快速幂)
    hdu 1005 根据递推公式构造矩阵 ( 矩阵快速幂)
    hdu 4549 M斐波拉契 (矩阵快速幂 + 费马小定理)
    UVa 1643 Angle and Squares (计算几何)
    UVa 11040 Add bricks in the wall (水题递推)
    UVa 1336 Fixing the Great Wall (区间DP)
  • 原文地址:https://www.cnblogs.com/linuxAndMcu/p/13680409.html
Copyright © 2020-2023  润新知