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

news2024/12/27 9:59:25

循环foreach

在这里插入图片描述

import Prompt from '@system.prompt'

class Item {
  icon: Resource
  name: string
  price: number

  constructor(icon: Resource, name: string, price: number) {
    this.icon = icon
    this.name = name
    this.price = price
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 150
  private 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: Resource
  name: string
  price: number

  constructor(icon: Resource, name: string, price: number) {
    this.icon = icon
    this.name = name
    this.price = price
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 150
  private 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 = 13

  build() {
    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: Resource
  name: string
  price: number

  constructor(icon: Resource, name: string, price: number) {
    this.icon = icon
    this.name = name
    this.price = price
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 150
  private 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: Resource
  name: string
  price: number

  constructor(icon: Resource, name: string, price: number) {
    this.icon = icon
    this.name = name
    this.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 = 150
  private 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 = 150
  private 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.coloradmin.cn/o/1343602.html

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

相关文章

Linux 安装Jupyter notebook 并开启远程访问

Linux 安装Jupyter notebook 并开启远程访问

文章目录 安装Python安装pip安装Jupyter启动Jupyter Notebook1. 生成配置文件2. 创建密码3. 修改jupyter notebook的配置文件4. 启动jupyter notebook5. 远程访问jupyter notebook 安装Python 确保你的系统上已经安装了Python。大多数Linux发行版都预装了Python。你可以在终端…
阅读更多...
flutter 之proto

flutter 之proto

和嵌入式用proto协议来通信&#xff0c;以mac来演示 先在电脑上安装protobuf&#xff08;在博主文章内容里面搜Mac安装protobuf&#xff09;&#xff0c;然后在桌面上放这几个文件&#xff0c;且build_proto_dart.sh文件内容如图所示 #!/bin/bashSCRIPT$(readlink -f "$0…
阅读更多...
NFC物联网智能学生宿舍系统设计方案

NFC物联网智能学生宿舍系统设计方案

随着物联网技术的不断发展&#xff0c;智慧城市、智能家居、智慧校园的建设也在如火如茶地进行。本文结合物联网发展过程中相关的技术&#xff0c;应用到智慧校园的建设过程中&#xff0c;将学生宿舍打造成舒适、安全的集体空间&#xff0c;该系统可以对学生宿舍实现智能开门、…
阅读更多...
Python爬虫教程30：Selenium网页元素，定位的8种方法！

Python爬虫教程30：Selenium网页元素，定位的8种方法！

Selenium可以驱动浏览器&#xff0c;完成各种网页浏览器的模拟操作&#xff0c;比如模拟点击等。要想操作一个元素&#xff0c;首先应该识别这个元素。人有各种的特征&#xff08;属性&#xff09;&#xff0c;我们可以通过其特征找到人&#xff0c;如通过身份证号、姓名、家庭…
阅读更多...
云短信平台优惠活动 - 华为OD统一考试

云短信平台优惠活动 - 华为OD统一考试

OD统一考试 题解： Java / Python / C++ 题目描述 某云短信厂商，为庆祝国庆，推出充值优惠活动。 现在给出客户预算，和优惠售价序列，求最多可获得的短信总条数。 输入描述 第一行客户预算M，其中 0<=M<=100 第二行给出售价表，P1,P2,… Pn, 其中 1<=n<=100…
阅读更多...
下载和安装AD14 - Altium Designer 14.3.20.54863

下载和安装AD14 - Altium Designer 14.3.20.54863

这个版本应该还支持XP 系统[doge]&#xff0c;总之就是想安装一下&#xff0c;没什么特别的意义。 下载 资源来自毛子网站&#xff1a;https://rutracker.net/forum/viewtopic.php?t5140739&#xff0c;带上个网页翻译插件就行。要用磁力链接下载&#xff0c;推荐用qbittorr…
阅读更多...
一篇文章深入认识微服务SpringCloud和Dubbo的区别

一篇文章深入认识微服务SpringCloud和Dubbo的区别

1、SpringCloud是什么 SpringCloud, 基于SpringBoot提供了一套微服务解决方案&#xff0c;包括服务注册与发现&#xff0c;配置中心&#xff0c;全链路监控&#xff0c;服务网关&#xff0c;负载均衡&#xff0c;熔断器等组件&#xff0c;除了基于NetFlix的开源组件做高度抽象…
阅读更多...
沙特电子签证照片尺寸要求及手机自拍制作方法介绍

沙特电子签证照片尺寸要求及手机自拍制作方法介绍

Hey小伙伴们&#xff0c;准备去沙特阿拉伯旅行的朋友们注意啦&#xff01;沙特驻华大使馆对签证所需照片是有要求的&#xff0c;今天我要分享给大家的是关于沙特签证照片的尺寸和拍摄要求&#xff0c;让你的签证申请过程更加顺利哦&#xff01;此外&#xff0c;也教大家一种在家…
阅读更多...
maven命令行安装依赖测试

maven命令行安装依赖测试

mvn dependency:get -DgroupIdorg.springframework -DartifactIdspring-core -Dversion5.3.9作用&#xff1a;可用于测试配置环境变量后&#xff0c;能否下载依赖到本地仓库
阅读更多...
基于JAVA+SSM+VUE的前后端分离的大学竞赛管理系统

基于JAVA+SSM+VUE的前后端分离的大学竞赛管理系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着互联网技术的快速…
阅读更多...
初识Sringboot3+vue3环境准备

初识Sringboot3+vue3环境准备

环境准备 后端环境准备 下载JDK17https://www.oracle.com/java/technologies/downloads/#jdk17-windows 安装就下一步下一步,选择安装路径 配置环境 环境 JDK17、IDEA2021、maven3.5、vscode 后端 基础&#xff1a;javaSE&#xff0c;javaWeb、JDBC、SMM框架&#xff08;Spr…
阅读更多...
如何使用idea部署springboot项目全过程

如何使用idea部署springboot项目全过程

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…
阅读更多...
0开始配置Cartographer建图和导航定位

0开始配置Cartographer建图和导航定位

0开始配置Cartographer 日期&#xff1a;12-19 硬件&#xff1a;激光雷达IMU 小车的tf变换&#xff1a; 建图配置 lua文件配置&#xff1a;my_robot.lua include "map_builder.lua" include "trajectory_builder.lua"options {map_builder MAP_BUILDE…
阅读更多...
HarmonyOS page生命周期函数讲解

HarmonyOS page生命周期函数讲解

下面 我们又要看一个比较重要的点了 页面生命周期 页面组件有三个生命周期 onPageShow 页面显示时触发 onPageHide 页面隐藏时触发 onBackPress 页面返回时触发 这里 我们准备两个组件 首先是 index.ets 参考代码如下 import router from ohos.router Entry Component struc…
阅读更多...
扭蛋机小程序搭建：打造互联网“流量池”

扭蛋机小程序搭建：打造互联网“流量池”

随着互联网科技的发展&#xff0c;扭蛋机小程序成为了市场发展的重要力量。 扭蛋机市从日本发展流行起来的&#xff0c;玩法就是根据设置的概率&#xff0c;让玩家体验扭蛋机的乐趣。扭蛋机中有隐藏款和稀有款&#xff0c;为了获得稀有款商品&#xff0c;玩家便会进行扭蛋&…
阅读更多...
python gui programming cook,python gui视频教程

python gui programming cook,python gui视频教程

大家好&#xff0c;给大家分享一下python gui programming cook&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; Source code download: 本文相关源码 前言 上一节我们实现了明细窗体GUI的搭建&#xff0c;并且设置了查看、修改、添加三种不…
阅读更多...
复数值神经网络可能是深度学习的未来

复数值神经网络可能是深度学习的未来

一、说明 复数这种东西，在人的头脑中似乎抽象、似乎复杂，然而，对于计算机来说，一点也不抽象，不复杂，那么，将复数概念推广到神经网络会是什么结果呢？本篇介绍国外的一些同行的尝试实践，请我们注意观察他们的进展。
阅读更多...
【深度学习-图像分类】03 - VGG 论文学习与总结

【深度学习-图像分类】03 - VGG 论文学习与总结

论文地址&#xff1a;VERY DEEP CONVOLUTIONAL NETWORKS FOR LARGE-SCALE IMAGE RECOGNITION 论文学习 1. 摘要 这篇论文探讨了在大规模图像识别任务中&#xff0c;卷积神经网络&#xff08;ConvNets&#xff09;深度对其准确性的影响。作者的主要贡献是对不断增加深度的网络…
阅读更多...
nodeJS搭建免费代理IP池爬取贴吧图片实战

nodeJS搭建免费代理IP池爬取贴吧图片实战

之前用python写过爬虫&#xff0c;这次想试试nodeJS爬虫爬取贴吧图片&#xff0c;话不多说代码如下&#xff0c;爬取制定吧的前十页所有帖子里的图片 爬取贴吧图片脚本 你得提前创建一个images文件夹 const axios require("axios"); const cheerio require("…
阅读更多...
4. 云原生之kubesphere基础服务搭建

4. 云原生之kubesphere基础服务搭建

文章目录 安装kubesphere插件服务暴露NodePort方式LoadBalancer方式安装 OpenELB部署eip资源配置网关启动网关创建路由测试网关路由ingress高级功能在服务中配置LoadBalancer 基础设施部署服务部署建议helm仓库添加helm仓库 运维相关部署gitlab部署nexus3部署harbor 研发相关 安…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023