鸿蒙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.hqwc.cn/news/307905.html

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

相关文章

SpringCloud(H版alibaba)框架开发教程之Ribbon负载均衡和Openfeign远程调用——附源码（3）

SpringCloud(H版alibaba)框架开发教程之Ribbon负载均衡和Openfeign远程调用——附源码（3）

源码地址在这套教程的第一个里 我们打开order80的主类上的注释 Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具&#xff0c;它基于Netflix Ribbon实现。通过Spring Cloud的封装&#xff0c;可以让我们轻松地将面向服务的REST模版请求自动转换成客户端负载均衡的…
阅读更多...
听GPT 讲Rust源代码--src/tools(34)

听GPT 讲Rust源代码--src/tools(34)

File: rust/src/tools/clippy/clippy_lints/src/collection_is_never_read.rs 文件"collection_is_never_read.rs"位于Rust源代码中的clippy_lints工具中&#xff0c;其作用是检查在集合类型&#xff08;如Vec、HashMap等&#xff09;的实例上执行的操作是否被忽略了…
阅读更多...
DSG YashanDB数据交互解决方案：更稳、更快、更安全

DSG YashanDB数据交互解决方案：更稳、更快、更安全

近期&#xff0c;深圳计算科学研究院&#xff08;简称“深算院”&#xff09;携手迪思杰&#xff08;北京&#xff09;数据管理技术有限公司&#xff08;简称“DSG”&#xff09;重磅推出基于崖山数据库的数据交互解决方案&#xff0c;具备双向迁移同步、性能稳定、支持复杂对象…
阅读更多...
SpringMVC之视图和RESTful

SpringMVC之视图和RESTful

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…
阅读更多...
7 事件处理

7 事件处理

一，事件处理 Screen事件，包括输入和常规事件，与给定的上下文相关联，通常在主应用程序的循环中处理。 Screen在服务器端管理每个上下文的事件队列。Screen为每个上下文创建事件队列，最大队列大小默认为200。此值可在graphics.conf的全局部分配置。如果有比指定的队列大小…
阅读更多...
静态路由实验

静态路由实验

实验目的&#xff1a; &#xff08;1&#xff09;理解静态路由的含义&#xff1b; &#xff08;2&#xff09;掌握路由器静态路由的配置方法&#xff1b; &#xff08;3&#xff09;理解默认路由的含义&#xff1b; &#xff08;4&#xff09;掌握默认路由的配置方法。 实…
阅读更多...
FontsTest.java

FontsTest.java

package fonts;import java.awt.Font; import java.awt.GraphicsEnvironment;/*** Font测试* * 不同字体在不同操作系统是不一样的&#xff0c;更新* * linux&#xff1a; https://blog.csdn.net/spencer_tseng/article/details/135232675windows&#xff1a; https://blog.cs…
阅读更多...
UGUI：一个轻量级的TFTLCD彩色显示屏GUI库

UGUI：一个轻量级的TFTLCD彩色显示屏GUI库

目录 一、引言 二、移植说明 三、如何使用UGUI函数 2.1 UGUI函数介绍 2.2 窗口控件管理 2.3 如何建立一个按键 四、如何实现触摸控制 一、引言 UGUI是一个经过精心设计的轻量级TFT-LCD彩色显示屏GUI库&#xff0c;旨在为用户提供高效、稳定且易于使用的图形用户界面。该…
阅读更多...
需求：多笔流水的金额分配给多个订单，确保流水总金额和订单总金额一致

需求：多笔流水的金额分配给多个订单，确保流水总金额和订单总金额一致

&#x1f4da;目录 需求业务解释解决代码效果 需求 按照一定规则将多笔流水的金额分配给多个订单&#xff0c;确保流水总金额和订单总金额一致。 业务解释 之前系统做了个功能&#xff0c;允许对订单进行录错退款&#xff0c;并且重新关联新的订单&#xff0c;审核通过完成后…
阅读更多...
算法基础day1

算法基础day1

归并排序模版 #include <iostream> using namespace std; int n; const int N 1e610; int q[N],tmp[N]; void merge_sort(int l,int r,int q[]){if(l>r) return;int mid lr>>1;merge_sort(l,mid,q);merge_sort(mid1,r,q);//归并的的过程int k0,il,jmid1;while(…
阅读更多...
MPLS动态协议LDP配置示例

MPLS动态协议LDP配置示例

一、预习&#xff1a; MPLS是一种根据报文中携带的标签来转发数据的技术&#xff0c;两台LSR必须在它们之间转的数据 的标签使用上“达成共识”。LSR之间可以运行LDP来告知其他LSR本设备上的标签绑定信息&#xff0c;从而实现标签报文的正确转发。 LSR&#xff1a;Label Switch…
阅读更多...
TP-LINK 路由器忘记密码 - 恢复出厂设置

TP-LINK 路由器忘记密码 - 恢复出厂设置

TP-LINK 路由器忘记密码 - 恢复出厂设置 1. 恢复出厂设置2. 创建管理员密码3. 上网设置4. 无线设置5. TP-LINK ID6. 网络状态References 1. 恢复出厂设置 在设备通电的情况下&#xff0c;按住路由器背面的 Reset 按钮直到所有指示灯同时亮起后松开。 2. 创建管理员密码 3. 上网…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023