鸿蒙Harmony（七）ArkUI--循环foreachList组件自定义组件

循环foreach

在这里插入图片描述

import Prompt from '@system.prompt'class Item {icon: Resourcename: stringprice: numberconstructor(icon: Resource, name: string, price: number) {this.icon = iconthis.name = namethis.price = price}
}@Entry
@Component
struct Index {@State message: string = 'Hello World'@State imageWidth: number = 150private data: Array<Item> = [{ icon: $r('app.media.apple'), name: '苹果', price: 4.5 },{ icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },{ icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },{ icon: $r('app.media.icon'), name: '葡萄', price: 20 }]build() {Column({ space: 20 }) {Text("展示列表").fontColor("#38D").fontSize(25).margin({ top: 20, left: 20 })ForEach(this.data, (item: any, index: number) => {Row() {Image(item.icon).width(80).height(80).borderRadius(40) //圆角.interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）.margin({ left: 30 })Column({ space: 5 }) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)Text(item.price.toString()).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)}.width("100%")}.width("100%").height(120).backgroundColor("#ffffff")})}.height('100%').backgroundColor("#eeeeee").justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)}
}

List列表

List列表使用格式

   List({ space: 20 }) {ForEach(this.data, (item: any, index: number) => {ListItem() {// 列表内容只能包含一个根组件}}}

import Prompt from '@system.prompt'class Item {icon: Resourcename: stringprice: numberconstructor(icon: Resource, name: string, price: number) {this.icon = iconthis.name = namethis.price = price}
}@Entry
@Component
struct Index {@State message: string = 'Hello World'@State imageWidth: number = 150private data: Array<Item> = [{ icon: $r('app.media.apple'), name: '苹果', price: 4.5 },{ icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },{ icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },{ icon: $r('app.media.icon'), name: '葡萄', price: 20 },{ icon: $r('app.media.apple'), name: '苹果', price: 4.5 },{ icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },{ icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },{ icon: $r('app.media.icon'), name: '葡萄', price: 20 }]build() {Column({ space: 20 }) {Text("展示列表").fontColor("#38D").fontSize(25).margin({ top: 20, left: 20 })List({ space: 20 }) {ForEach(this.data, (item: any, index: number) => {ListItem() {Row() {Image(item.icon).width(80).height(80).borderRadius(40) //圆角.interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）.margin({ left: 30 })Column({ space: 5 }) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)Text(item.price.toString()).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)}.width("100%")}.width("100%").height(120).backgroundColor("#ffffff")}})}}.height('100%').backgroundColor("#eeeeee").justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)}
}

自定义组件

自定义组件：

  • 创建自定义组件 @Component
  • @Builder
  • @Style：仅可封装组件通用属性
  • @Extend：仅可定义在全局，可以设置组件的特有属性

方式一：自定义组件

@Component
struct GoodsItemComponent {build() {}
}

代码示例

@Component
export struct GoodsItemComponent {private icon: Resource = $r('app.media.app_icon')private name: string = "苹果"private price: number = 13build() {Row() {Image(this.icon).width(80).height(80).borderRadius(40) //圆角.interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）.margin({ left: 30 })Column({ space: 5 }) {Text(this.name).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)Text(this.price.toString()).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)}.width("100%")}.width("100%").height(120).backgroundColor("#ffffff")}
}

自定义组件的使用

import Prompt from '@system.prompt'
import { GoodsItemComponent } from './GoodsItemComponent'export class Item {icon: Resourcename: stringprice: numberconstructor(icon: Resource, name: string, price: number) {this.icon = iconthis.name = namethis.price = price}
}@Entry
@Component
struct Index {@State message: string = 'Hello World'@State imageWidth: number = 150private data: Array<Item> = [{ icon: $r('app.media.apple'), name: '苹果', price: 4.5 },{ icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },{ icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },{ icon: $r('app.media.icon'), name: '葡萄', price: 20 },{ icon: $r('app.media.apple'), name: '苹果', price: 4.5 },{ icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },{ icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },{ icon: $r('app.media.icon'), name: '葡萄', price: 20 }]build() {Column({ space: 20 }) {Text("展示列表").fontColor("#38D").fontSize(25).margin({ top: 20, left: 20 })List({ space: 20 }) {ForEach(this.data, (item: any, index: number) => {ListItem() {GoodsItemComponent({ icon: item.icon, name: item.name, price: item.price })}})}}.height('100%').backgroundColor("#eeeeee").justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)}
}

方式二：自定义构建函数

全局自定义构建函数

import Prompt from '@system.prompt'
import { GoodsItemComponent } from './GoodsItemComponent'export class Item {icon: Resourcename: stringprice: numberconstructor(icon: Resource, name: string, price: number) {this.icon = iconthis.name = namethis.price = price}
}
// 全局自定义构建函数
@Builder function GoodsItem(item: Item) {Row() {Image(item.icon).width(80).height(80).borderRadius(40) //圆角.interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）.margin({ left: 30 })Column({ space: 5 }) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)Text(item.price.toString()).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)}.width("100%")}.width("100%").height(120).backgroundColor("#ffffff")
}@Entry
@Component
struct Index {@State message: string = 'Hello World'@State imageWidth: number = 150private data: Array<Item> = [{ icon: $r('app.media.apple'), name: '苹果', price: 4.5 },{ icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },{ icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },{ icon: $r('app.media.icon'), name: '葡萄', price: 20 },{ icon: $r('app.media.apple'), name: '苹果', price: 4.5 },{ icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },{ icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },{ icon: $r('app.media.icon'), name: '葡萄', price: 20 }]build() {Column({ space: 20 }) {Text("展示列表").fontColor("#38D").fontSize(25).margin({ top: 20, left: 20 })List({ space: 20 }) {ForEach(this.data, (item: any, index: number) => {ListItem() {GoodsItem(item)}})}}.height('100%').backgroundColor("#eeeeee").justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)}
}

局部自定义构建函数

不加function

@Entry
@Component
struct Index {@State message: string = 'Hello World'@State imageWidth: number = 150private data: Array<Item> = [{ icon: $r('app.media.apple'), name: '苹果', price: 4.5 },{ icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },{ icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },{ icon: $r('app.media.icon'), name: '葡萄', price: 20 },{ icon: $r('app.media.apple'), name: '苹果', price: 4.5 },{ icon: $r('app.media.app_icon'), name: '香蕉', price: 2.5 },{ icon: $r('app.media.baobao'), name: '宝宝', price: 10000000000 },{ icon: $r('app.media.icon'), name: '葡萄', price: 20 }]build() {Column({ space: 20 }) {Text("展示列表").fontColor("#38D").fontSize(25).margin({ top: 20, left: 20 })List({ space: 20 }) {ForEach(this.data, (item: any, index: number) => {ListItem() {// 使用this进行调用this.GoodsItem(item)}})}}.height('100%').backgroundColor("#eeeeee").justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Start)}// 局部自定义构建函数 不加function@Builder GoodsItem(item: Item) {Row() {Image(item.icon).width(80).height(80).borderRadius(40) //圆角.interpolation(ImageInterpolation.High) // 图片插值器（某些图片放大会出现锯齿，插值器可以用来弥补锯齿）.margin({ left: 30 })Column({ space: 5 }) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)Text(item.price.toString()).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)}.width("100%")}.width("100%").height(120).backgroundColor("#ffffff")}
}

自定义样式

全局公共样式

@Styles function fillScreen() {.width('100%').height('100%').backgroundColor("#eeeeee")
}

在这里插入图片描述

局部公共样式

@Styles fillScreen() {.width('100%').height('100%').backgroundColor("#eeeeee")}

在这里插入图片描述

特定组件全局公共样式

使用@Extend，这种方式只能写在全局，不能写在组件内部

// 继承模式，只能在在全局，不能写在组件内部
@Extend(Text) function nameFontStyle() {.fontSize(20).fontWeight(FontWeight.Bold).fontColor('#35D').fontStyle(FontStyle.Italic)
}

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

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

相关文章

百度地图添加坐标点

百度地图添加坐标点

​​​​​​html <!DOCTYPE html><html xmlns"http://www.w3.org/1999/xhtml"> <head runat"server"><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>查看签到信息-地图…
阅读更多...
钡铼技术集IO数据采集可编程逻辑控制PLC无线4G环保物联网关

钡铼技术集IO数据采集可编程逻辑控制PLC无线4G环保物联网关

背景 数据采集传输对于环保企业进行分析和决策是十分重要的&#xff0c;而实时数据采集更能提升环保生产的执行力度&#xff0c;从而采取到更加及时高效的措施。因此实时数据采集RTU成为环保企业的必备产品之一。 产品介绍 在推进环保行业物联网升级过程中&#xff0c;环保RTU在…
阅读更多...
楼宇智慧能源消耗监测管理系统，楼宇中的能源“管家”

楼宇智慧能源消耗监测管理系统，楼宇中的能源“管家”

随着人口的增加&#xff0c;楼宇数据呈上涨趋势&#xff0c;但是楼宇智能建设在我国普及性远远不足&#xff0c;相比传统楼宇控制&#xff0c;智能楼宇控制系统对于楼宇内部的用电设备控制&#xff0c;能够更加的节约能源&#xff0c;降低成本。对于现代化楼宇而言&#xff0c;…
阅读更多...
一款超酷的一体化网站测试工具：Web-Check

一款超酷的一体化网站测试工具：Web-Check

Web-Check 是一款功能强大的一体化工具&#xff0c;用于发现网站/主机的相关信息。用于检查网页的工具&#xff0c;用于确保网页的正确性和可访问性。它可以帮助开发人员和网站管理员检测网页中的错误和问题&#xff0c;并提供修复建议。 它只需要输入一个网站就可以查看一个网…
阅读更多...
什么是爬虫，为什么爬虫会导致服务器负载跑满

什么是爬虫，为什么爬虫会导致服务器负载跑满

在我们日常使用服务器的过程中&#xff0c;经常会有遇到各种各样的问题。今天就有遇到用户来跟德迅云安全反馈自己服务器负载跑满&#xff0c;给用户详细排查后也未发现异常&#xff0c;抓包查看也没有明显攻击特征&#xff0c;后续查看发现是被爬虫爬了&#xff0c;调整处理好…
阅读更多...
连理：保险中的实名DID创新应用

连理：保险中的实名DID创新应用

2023年12月12日&#xff0c;BSN实名DID服务发布会在北京成功举办&#xff0c;会上正式发布了BSN实名DID服务。这一服务充分融合了BSN区块链服务网络和CTID数字身份链两大基础设施&#xff0c;满足“前台匿名、后台实名”的管理要求&#xff0c;对服务数字经济发展、支撑国家数据…
阅读更多...
Springer build pdf乱码

Springer build pdf乱码

在textstudio中编辑时没有错误&#xff0c;在editor manager生成pdf时报错。 首先不要改源文件&#xff0c;着重看你的上传顺序&#xff1a; 将.tex文件&#xff0c;.bst文件&#xff0c;.cls文件&#xff0c;.bib文件, .bbl文件的类型&#xff0c;在editor manager中是Item。…
阅读更多...
archiver error. Connect internal only, until freed.

archiver error. Connect internal only, until freed.

[64000][257] ORA-00257: archiver error. Connect internal only, until freed.原因 归档日志写满了、闪回日志写满了(根本原因是服务器磁盘写满了) # 切换到oracle服务 su - oracle# 使用sysdba用户登录 解决方案:(https://blog.csdn.net/qq_37635373/article/details/933282…
阅读更多...
thinkphp+vue_mysql汽车租赁管理系统1ma2x

thinkphp+vue_mysql汽车租赁管理系统1ma2x

运行环境:phpstudy/wamp/xammp等 开发语言&#xff1a;php 后端框架&#xff1a;Thinkphp5 前端框架&#xff1a;vue.js 服务器&#xff1a;apache 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat/phpmyadmin 课题主要分为三大模块&#xff1a;即管理员模块、用户模块…
阅读更多...
利用 PEB_LDR_DATA 结构枚举进程模块信息

利用 PEB_LDR_DATA 结构枚举进程模块信息

1. 引言 我们常常通过很多方法来获取进程的模块信息&#xff0c;例如 EnumProcessModules 函数、CreateToolhelp32Snapshot 函数、WTSEnumerateProcesses 函数、ZwQuerySystemInformation 函数等。但是调用这些接口进行模块枚举的原理是什么我们并不知道。通过学习 PEB 中 PEB…
阅读更多...
Stable Diffusion WebUI安装合成面部说话插件SadTalker

Stable Diffusion WebUI安装合成面部说话插件SadTalker

SadTalker可以根据一张图片、一段音频&#xff0c;合成面部说这段语音的视频。图片需要真人或者接近真人。 安装ffmpeg 下载地址&#xff1a; https://www.gyan.dev/ffmpeg/builds/ 下载ffmpeg-git-full.7z 后解压&#xff0c;将解压后的目录\bin添加到环境变量的Path中。 在…
阅读更多...
出海合规云安全，AWS Landing Zone解决方案建立安全着陆区

出海合规云安全，AWS Landing Zone解决方案建立安全着陆区

在出海的大环境中&#xff0c;企业数字化转型的趋势之一就是上云。然而&#xff0c;上云也带来了新的挑战&#xff0c;特别是对企业的 IT 建设和管理提出了更高的要求。为了构建一个安全合规的云上信息系统环境&#xff0c;满足企业中不同用户的快速增长、资源访问可控、成本可…
阅读更多...
Tips：电池电源电压转换为220V

Tips：电池电源电压转换为220V

今天在进行操作的时候&#xff0c;看到一个新的东西&#xff0c;就是如何普通的电瓶电压转化为220V交流电。 当在室外或者工作地距离电源比较远的情况下&#xff0c;一般是选取拉线的方式进行采电&#xff0c;但是当距离电源过远&#xff0c;使用拉线的方式就不可用了。如何在…
阅读更多...
2023年最后一篇博客！

2023年最后一篇博客！

首先祝大家周末快乐&#xff01;元旦快乐&#xff01; 今天不聊技术哦 01哀叹2023 2023年只剩2天了&#xff01;转眼间又是一年到头了&#xff0c;这一年我做了什么呢&#xff1f;回过头来一想&#xff0c;什么都没有做。也尝试过做不少事情&#xff0c;但都是没有一个好的结…
阅读更多...
小程序中拖拽和缩放图片

小程序中拖拽和缩放图片

需求&#xff1a;点击元素后选中&#xff0c;出现缩放按钮&#xff0c;拖动缩放按钮可实现元素的缩放&#xff1b;并且元素本身是可以拖动的。 html&#xff1a; <block wx:for"{{imageControls}}" wx:key"index"><view hidden"{{item.hidd…
阅读更多...
对SPI总线上挂接多个X5045的读写操作

对SPI总线上挂接多个X5045的读写操作

#include<reg51.h> //包含单片机寄存器的头文件 #include<intrins.h> //包含_nop_()函数定义的头文件 sbit SCKP3^4; //将SCK位定义为P3.4引脚 sbit SIP3^5; //将SI位定义为P3.5引脚 sbit SOP3^6; //将SO位定义为P3.6引脚 sbit CS1P3^7; …
阅读更多...
华为发布的工业软件三大难题：面向CAE分析的高质量曲面贴体网格的生成问题

华为发布的工业软件三大难题：面向CAE分析的高质量曲面贴体网格的生成问题

以下内容转载&#xff1a; 网格生成&#xff0c;是把一个特定的研究区域分割成由许多很小的子区域(元素)&#xff0c;以满足一些特定的要求。在理想的情况下&#xff0c;网格中的每个元素的形状和分布可以通过一种自动的网格生成算法来确定。 结构网格生成的代数网格生成法和…
阅读更多...
10.Go 映射

10.Go 映射

映射&#xff08;map&#xff09;是一种特殊的数据结构&#xff0c;用于存储一系列无序的键值对&#xff0c;映射基于键来存储数据。映射功能强大的地方是&#xff0c;能够基于键快速检索数据。键就像索引一样&#xff0c;指向与该键关联的值。与C、Java中的映射的不同之处在于…
阅读更多...
挑战Python100题(7)

挑战Python100题(7)

100+ Python challenging programming exercises 7 Question 61 Print a unicode string "hello world". Hints: Use ustrings format to define unicode string. 打印一个unicode字符串“helloworld”。 提示：使用u“字符串”格式定义unicode字符串。 Solution…
阅读更多...
提升Windows系统安全性的一些有效的策略

提升Windows系统安全性的一些有效的策略

假设一个杀猪的机器人感染了病毒&#xff0c;把人识别成了猪&#xff0c;&#xff0c;&#xff0c;&#xff0c;&#xff0c; 1&#xff1a;我偶然发现的&#xff1a;把所有向外的UDP都禁止&#xff0c;但是要开放53号端口&#xff0c;因为这是DNS通讯端口&#xff0c;没有这个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023