QM关于Repeater的使用

来源：互联网发布：学美工设计培训班编辑：程序博客网时间：2024/05/01 13:32

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

：下面是我写的一个实例

main.aml

import QtQuick 2.7import QtQuick.Controls 1.5import QtQuick.Layouts 1.0ApplicationWindow {    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.0Item {    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                        }                    }                }            }        }    }}

贴一个结果：

0 0