QM关于Repeater的使用

我们在使用qml画界面的时候会经常用到很多重复的组件，下面我们来了解一种可以快速布局的的Repeater

：下面是我写的一个实例

main.aml

import QtQuick 2.7
import QtQuick.Controls 1.5
import QtQuick.Layouts 1.0
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    id:root
    Rectangle{width: root.width; height: root.height;color: "#3A3250";
        Column {
            anchors.fill: parent
            spacing: 10
            Repeater {
                id: mainRepeater
                model: 3
                delegate: IOcase{//IOLNormalCase这是一个qml
                    id: iolCalItem
                    width: root.width
                    height: (root.height ) / 3
                    modelType: Math.pow(2,index)
                    viewModel: iolCalItem.modelType == 1 ? 7
                                              : 6
                }
            }
        }
    }
}

IOcase.qml

import QtQuick 2.0

Item {
    id: root

    property int modelType: 1
    property alias viewModel: listView.model
    Text {//table type
         horizontalAlignment: Text.AlignLeft
         text: modelType & 1 ? qsTr("Formula Param.")
                             : modelType & 2 ? qsTr("Emme Table")
                                             : qsTr("IOL Ame Table")
         width: root.width / 6
     }
    Rectangle {
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        width: root.width / 6 * 5
        color: "transparent"
        border.width: 2
        border.color: "#545454"

        ListView {
            id: listView
            anchors.fill: parent
            anchors.margins: parent.border.width
            interactive: false
            delegate: Rectangle {
                color: listView.currentIndex == index ? "#3F6597" : "transparent"
                width: listView.width
                height: listView.height / listView.count
                Row {//水平布局
                    anchors.fill: parent
                    Text {
                        width: parent.width / 5
                        height: parent.height
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: "bb"
                        Rectangle {
                            color: "#545454"
                            anchors.right: parent.right
                            width: 2
                            height: parent.height
                        }
                    }
                    Text {
                        width: parent.width / 5
                        height: parent.height
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: "00"
                        Rectangle {
                            color: "#545454"
                            anchors.right: parent.right
                            width: 2
                            height: parent.height
                        }
                    }
                    Text {
                        width: parent.width / 5
                        height: parent.height
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text:"00"
                        Rectangle {
                            color: "#545454"
                            anchors.right: parent.right
                            width: 2
                            height: parent.height
                        }
                    }

                    Text {
                        width: parent.width / 5
                        height: parent.height
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: "00"
                        Rectangle {
                            color: "#545454"
                            anchors.right: parent.right
                            width: 2
                            height: parent.height
                        }
                    }

                    Text {
                        width: parent.width / 5
                        height: parent.height
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        text: "00"
                    }
                }
                Rectangle {
                    color: "#545454"
                    width: parent.width
                    height: 2
                    anchors.bottom: parent.bottom
                    visible: index != listView.count - 1
                }//颜色框

                MouseArea {//鼠标选择点击事件
                    anchors.fill: parent
                    onClicked: {
                        if (listView.currentIndex != index) {
                            listView.currentIndex = index
                        }
                    }
                }
            }
        }
    }
}

贴一个结果：