QML之Repeater 控件使用

Repeater 控件是 重复作用 根据 model中的index 数量进行重复

废话不说 直接看如何用 

当model 为数字时 

Rectangle{height: 1200width: 500visible: trueanchors.fill: parentColumn{spacing: 20Repeater{model: 10delegate: Rectangle{width: 60height: 20color: index%2 == 0?"red":"blue"}}}
}

结果:

 当model 为数组时

Rectangle{height: 1200width: 500visible: trueanchors.fill: parentColumn{spacing: 20Repeater{model: ["apple","banana","pear"]delegate: Rectangle{width: 110height: 50color: index%2 == 0?"red":"blue"Text {id: nametext: modelData+indexfont.pixelSize: 14anchors.centerIn: parent}}}}
}

结果:

  当model 为自定义model时  采用id 传递

Rectangle{height: 1200width: 500visible: trueanchors.fill: parentColumn{spacing: 20Repeater{model: modelIddelegate: Rectangle{width: 110height: 50color: index%2 == 0?"red":"blue"Text {id: txttext: name+" "+indexfont.pixelSize: 14anchors.centerIn: parent}}}ListModel{id:modelIdListElement{name:"Liming";age: 12}ListElement{name:"Zhangjie";age: 19}ListElement{name:"Wanglaing";age: 22}}}
}

结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/145254.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cisco交换机关于DHCP SNOOPING的配置指令

在Cisco交换机上配置DHCP Snooping(DHCP欺骗防护) DHCP Snooping的作用 DHCP Snooping是一项重要的网络安全功能,可用于维护网络的安全性和可靠性,减少潜在的网络问题,并提供日志和监控功能,以便网络管理…

LeetCode:1402. 做菜顺序、2316. 统计无向图中无法互相到达点对数

1. 1402 做菜顺序 题目详细为: 一个厨师收集了他 n 道菜的满意程度 satisfaction ,这个厨师做出每道菜的时间都是 1 单位时间。 一道菜的 「 like-time 系数 」定义为烹饪这道菜结束的时间(包含之前每道菜所花费的时间)乘以这道菜…

flutter 创建插件

资料: flutter与原生通信的方式简介 - 简书 完整流程 Flutter 集成 Golang 多语言跨端开发基础案例 - 知乎 https://www.cnblogs.com/webabcd/p/flutter_lib_plugin_plugin_ios.html 步骤1、创建插件 我创建的插件名字是konnect_im_sdk 选择的语言是 java和swi…

uni-app:引用文件的方法

绝对定位 ①import common from "/utils/common.js" ②import common from "utils/common.js" <template><view></view> </template> <script>import common from "/utils/common.js"export default {data() {ret…

如何实现LIN多通道测试

引言 在汽车的世界里&#xff0c;各个控制模块之间的通信就如同人体的神经系统一样&#xff0c;任何一个环节的失误都可能导致整个系统的崩溃。因此&#xff0c;通信的稳定性和可靠性验证就成为了我们必须要面对的重要问题。LIN&#xff08;Local Interconnect Network&#x…

智慧燃气巡检管理系统

我们知道燃气设施的巡检、巡查是运维工作中一项重要的基础工作&#xff0c;而巡检人员主要靠手动记录&#xff0c;回到公司后还得再进行录入归档、导入照片&#xff0c;然后打印装订等&#xff0c;涉及工作量也是不小的&#xff1b;还有人员更替&#xff0c;易造成人员对燃气设…

这5种炫酷的动态图,都是用Python实现的!

数据可以帮助我们描述这个世界、阐释自己的想法和展示自己的成果&#xff0c;但如果只有单调乏味的文本和数字&#xff0c;我们却往往能难抓住观众的眼球。而很多时候&#xff0c;一张漂亮的可视化图表就足以胜过千言万语。本文将介绍 5 种基于 Plotly 的可视化方法&#xff0c…

C++二分算法的应用:寻找峰值原理、源码及测试用例

说明 此文是课程https://edu.csdn.net/course/detail/38771 的讲义。 源码下载&#xff1a;https://download.csdn.net/download/he_zhidan/88458478 题目 长度为n的数组nums&#xff0c;请返回任意一峰值的索引。符合以下条件之一i便是峰值的索引。 n等于1 i等于0 n>…

Windows Server 2019 搭建FTP站点

目录 1.添加IIS及FTP服务角色 2.创建FTP账户&#xff08;用户名和密码&#xff09;和组 3.设置共享文件夹的权限 4.添加及设置FTP站点 5.配置FTP防火墙支持 6.配置安全组策略 7.客户端测试 踩过的坑说明&#xff1a; 1.添加IIS及FTP服务角色 a.选择【开始】→【服务器…

搭建react项目

一、环境准备 1、安装node 官网下载安装&#xff1a;https://nodejs.org/en 注&#xff1a; npm5.2以后&#xff0c;安装node会自动安装npm和npx 2、安装webpack npm install -g webpack3、安装create-react-app npm install -g create-react-app二、创建react项目 1、初…

SpringBoot使用@Value获取不到yaml中配置的值

在最近的开发中遇到一个问题,使用Value获取yml文件中配置的属性时始终获取不到值,一开始我以为是没有注入的问题,或者没有写setter方法的问题,后来我发现这些都都写了然后开始百度发现获取不到属性值有这么几个原因 获取不到值的原因 1.没有使用Component注解,也就是没有注入…

Java进阶篇--Condition与等待通知机制

Condition简介 Condition是Java并发包中的一种机制&#xff0c;用于线程之间的协作和通信。它与锁&#xff08;Lock&#xff09;紧密配合使用&#xff0c;并提供了更高级别的等待/通知功能。 下面是Condition的一些特性和区别&#xff1a; 1. 精确唤醒&#xff1a;Condition…