【QML基础】--Repeater的使用

假设你在项目过程中，需要使用到10个或者更多的控件，这些控件基础属性高度相似，不同的是位置或者是显示内容不同，这个时候你会怎么办？

PLAN A：写好一个控件，把它搞到完美，anchor什么的锚到极致，然后开始设计师的终极大招，Ctrl+C 和Ctrl+V ，然后搞定。

PLAN B：看见人别人写的什么function方法啊之类的，粘贴到自己的项目上，不好处就是，在人家那完美运行，到自己这到处都是bug。

其实这种事就一个方法，磨。

其实看不懂的多了，才会到处都是 bug，这两天正好碰到这样一个项目，拿起来一看，这都是啥！！？

于是潜心研究了下这个QML的重复控件，把笔记晒出来，大家一起学习。

repeater的使用

重复组件总计有两种形式 model的数量，这里可以直接写数量，例如3，也可以使用一个list去包含

先来看第一种：

// 例如要绘制三个button组件
//通过repeater组件，而不是重复的复制三份组件内容

//重复组件
Repeater{
    //model模型
    model：3    //这里先使用数量的形式,表示有这样三个控件
    Rectangle{
        width:100
        height:40
        color:"#366"       
           }
}
//查看结果：

重复是重复了，但是并没有完全重复

因为他们堆到一起了

repeater还有个重要属性，这个帮助文档里没有写，叫index

当我们使用repeater的时候，会自动生成一个叫index的索引；

你的model写的数字是几，生成的就是几，例如你写的3，那么生成的就是 0 1 2

分别对应三个重复的控件；

也方便后续做其他的操作 ，比如去跳转页面什么的；

我们利用index自增的特性，每次让index都乘以一个固定的数值，比如50，

再把它赋值给Y坐标，就会出现纵向堆叠的情况； 

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Repeater{
    model: 3
    Rectangle{
    y:index *50
    //index的值分别是0  1  2  ，那么三次乘以50，生成的y坐标就是 0 50 100
    //我这里控件的宽度是40，可以酌情处理；
    width: 100
    height: 40
    border.width: 1
    color: "#366"
    }
    }
}

再来看一下repeater里面list的用法： 

 Repeater{
    model: ["Button","Rectangle",'MouseArea']
    Rectangle{
    y:index *50
    width: 100
    height: 40
    border.width: 1
    color: "#366"
    }
    }

重点三个：

一是这里不管list里面是什么，重复的控件类型就是rectangle，和我们list里面是什么没关系，只是一个名字；

二是被重复的控件获取list里面的数据有俩类型，一是list的count值（数量），方便生成index的编号；

三是获取list的内容； //比如我们获取下list的内容，使用modelData属性：

 Repeater{
    model: ["Button","Rectangle",'MouseArea']
    Rectangle{
    y:index *50
    Text {
        id: name
        text: modelData
    }
    width: 100
    height: 40
    border.width: 1
    color: "#366"
    }
    }

效果如下：

 好了，repeater的基础用法就到这里。

当然还有很多的延伸，后续再写，如有纰漏敬请指正！

新人写的，看到了点赞鼓励下，感谢~~~~~