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

循环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)
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

如何确保云中高可用？聊聊F5分布式云DNS负载均衡

如何确保云中高可用？聊聊F5分布式云DNS负载均衡

在当今以应用为中心的动态化市场中&#xff0c;企业面临着越来越大的压力&#xff0c;不仅需要提供客户所期望的信息、服务和体验&#xff0c;而且要做到快速、可靠和安全。DNS是网络基础设施的重要组成部分&#xff0c;拥有一个可用的、智能的、安全和可扩展的DNS基础设施是至…
阅读更多...
人工智能_机器学习084_使用聚类算法_提取图片主要颜色_对图片进行聚类提取特征_对图片进行压缩---人工智能工作笔记0124

人工智能_机器学习084_使用聚类算法_提取图片主要颜色_对图片进行聚类提取特征_对图片进行压缩---人工智能工作笔记0124

然后我们再来看之前我们说聚类是可以进行数据压缩的对吧,现在我们用聚类KMeans进行 对图片主要特征颜色提取,来压缩图片 首先看一下我们准备的一张图片 首先导包,显示一下图片 import numpy as np 导入数学计算包 import matplotlib.pyplot as plt 导入画图工具包 import …
阅读更多...
【图像分类】【深度学习】【轻量级网络】【Pytorch版本】ShuffleNet_V2模型算法详解

【图像分类】【深度学习】【轻量级网络】【Pytorch版本】ShuffleNet_V2模型算法详解

【图像分类】【深度学习】【轻量级网络】【Pytorch版本】ShuffleNet_V2模型算法详解 文章目录 【图像分类】【深度学习】【轻量级网络】【Pytorch版本】ShuffleNet_V2模型算法详解前言ShuffleNet_V2讲解四条实用指导思想G1:相等的通道宽度可以降低存储访问成本G2:大量的分组卷积…
阅读更多...
C++单例设计模式

C++单例设计模式

C单例设计模式 文章目录 C单例设计模式单例设计模式介绍饿汉式单例设计模式懒汉式单例设计模式什么是可重入函数 单例设计模式介绍 单例模式指的是&#xff0c;无论怎么获取&#xff0c;永远只能得到该类类型的唯一一个实例对象&#xff0c;那么设计一个单例就必须要满足下面三…
阅读更多...
横屏转竖屏：一键轻松转换，让视频更适应屏幕！

横屏转竖屏：一键轻松转换，让视频更适应屏幕！

想象一下&#xff0c;你有一批横屏视频&#xff0c;想要将它们快速变为适应手机竖屏观看的格式&#xff0c;但又不想一个个手动处理。现在&#xff0c;有了我们的创意批量剪辑神器&#xff0c;这些烦恼全部消失&#xff01;只需简单几步&#xff0c;就能将横屏视频批量变身成为…
阅读更多...
VScode的入门手册(IDEA迁移到VScode)

VScode的入门手册(IDEA迁移到VScode)

从IDEA迁移到VScode的过程中&#xff0c;会有很多不适应的地方&#xff0c;下面算是一篇VScode的入门手册&#xff0c;也可以说是从IDEA迁移到VScode的手册。 命令面板&#xff08;Command Palette&#xff09; 允许你快速访问和执行命令。 在 Visual Studio Code 中&#x…
阅读更多...
3分钟了解Android中稳定性测试

3分钟了解Android中稳定性测试

一、什么是Monkey Monkey在英文里的含义是猴子&#xff0c;在测试行业的学名叫“猴子测试”&#xff0c;指的是没有测试经验的人甚至是根本不懂计算机的人&#xff08;就像一只猴子&#xff09;&#xff0c;不需要知道程序的任何用户交互方面的知识&#xff0c;给他一个程序&a…
阅读更多...
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…
阅读更多...
【音视频 ffmpeg 学习】 RTMP推流 mp4文件

【音视频 ffmpeg 学习】 RTMP推流 mp4文件

1.RTMP(实时消息传输协议)是Adobe 公司开发的一个基于TCP的应用层协议。 2.RTMP协议中基本的数据单元称为消息&#xff08;Message&#xff09;。 3.当RTMP协议在互联网中传输数据的时候&#xff0c;消息会被拆分成更小的单元&#xff0c;称为消息块&#xff08;Chunk&#xff…
阅读更多...
基于Freeswitch实现的Volte网视频通知应用

基于Freeswitch实现的Volte网视频通知应用

现在运营商的Volte网络已经很好的支持视频通话了&#xff0c;因此在原来的电话语音通知的基础上&#xff0c;可以更进一步实现视频的通知&#xff0c;让用户有更好的体验&#xff0c;本文就从技术角度&#xff0c;基于Freeswitch来实现此类应用&#xff08;本文假设读者已对Fre…
阅读更多...
C语言编写Windows程序：组合启用/禁用Telnet客户端，并Telnet指定ip和端口

C语言编写Windows程序：组合启用/禁用Telnet客户端，并Telnet指定ip和端口

本文程序是将启用/禁用Telnet客户端的命令进行组合&#xff0c;单个命令的解析可参考文章&#xff1a; 启用/禁用Windows功能中的Telnet客户端的命令_()命令将阻止使用telnintel-CSDN博客 源代码如下&#xff1a; #include <stdio.h> #include <stdlib.h> #include…
阅读更多...
【Java EE初阶五】wait及notify关键字

【Java EE初阶五】wait及notify关键字

1. wait和notify的概念 所谓的wait和notify其实就是等待、通知机制&#xff1b;该机制的作用域join类似&#xff1b;由于多个线程之间是随机调度的&#xff0c;引入wait和notify就是为了能够从应用层面上&#xff0c;干预到多个不同线程代码的执行顺序&#xff0c;此处的干预&a…
阅读更多...
小米电脑管家 - 手机平板电脑家居互联

小米电脑管家 - 手机平板电脑家居互联

系列文章目录 前言 联想电脑安装小米电脑管家实现设备互联 如图&#xff0c;将 小米平板 5 Pro 作为联想笔记本 GeekPro 5000 &#xff08;这垃圾电脑&#xff09;的副屏。 可以在小米平板控制笔记本&#xff0c;如图所示 一、官方使用手册 参考&#xff1a;小米电脑管家帮助 …
阅读更多...
大语言模型发展史

大语言模型发展史

前言 2023年可谓是生成式AI元年&#xff0c;大语言模型从崭露头角到锋芒毕露&#xff0c;已然成为人工智能领域的关键推动力。这一创新性的技术不仅在自然语言处理领域崭露头角&#xff0c;更深刻地改变了我们对人机交互、智能助手和信息处理的认知。那么大语言模型的发展历程…
阅读更多...
thinkphp+vue+mysql企业车辆管理系统m117l

thinkphp+vue+mysql企业车辆管理系统m117l

“企业车辆管理系统”是运用php语言和vue框架&#xff0c;以Mysql数据库为基础而发出来的。为保证我国经济的持续性发展&#xff0c;必须要让互联网信息时代在我国日益壮大&#xff0c;蓬勃发展。伴随着信息社会的飞速发展&#xff0c;企业车辆管理系统所面临的问题也一个接一个…
阅读更多...
基于策略模式和简单工厂模式实现zip、tar、rar、7z四种压缩文件格式的解压

基于策略模式和简单工厂模式实现zip、tar、rar、7z四种压缩文件格式的解压

推荐语 这篇技术文章深入探讨了基于策略模式和简单工厂模式实现四种常见压缩文件格式的解压方法。通过阅读该文章&#xff0c;你将了解到如何利用这两种设计模式来实现灵活、可扩展的解压功能&#xff0c;同时适应不同的压缩文件格式。如果你对设计模式和文件处理感兴趣或刚好…
阅读更多...
github鉴权失败

github鉴权失败

问题&#xff1a; 如上图所示 git push 时发生了报错&#xff0c;鉴权失败&#xff1b; 解决方案 Settings->Developer settings->Personal access tokens->Generate new token。创建新的访问密钥&#xff0c;勾选repo栏&#xff0c;选择有效期&#xff0c;为密钥命…
阅读更多...
Android MVVM 写法

Android MVVM 写法

前言 Model&#xff1a;负责数据逻辑 View&#xff1a;负责视图逻辑 ViewModel&#xff1a;负责业务逻辑 持有关系&#xff1a; 1、ViewModel 持有 View 2、ViewModel 持有 Model 3、Model 持有 ViewModel 辅助工具&#xff1a;DataBinding 执行流程&#xff1a;View &g…
阅读更多...
OpenStack云计算(-) 简介与部署Keystone

OpenStack云计算(-) 简介与部署Keystone

一.OpenStack简介 什么是云计算:云计算是一种按使用量付费的模式,这种模式提供可用的、便捷的、按需的网络访问,进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务) 云计算所包含的几个层次服务&#xff1a; SaaS ( Software as a Service ) :把在线软件作…
阅读更多...
【开源】基于Vue+SpringBoot的公司货物订单管理系统

【开源】基于Vue+SpringBoot的公司货物订单管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 客户管理模块2.2 商品维护模块2.3 供应商管理模块2.4 订单管理模块 三、系统展示四、核心代码4.1 查询供应商信息4.2 新增商品信息4.3 查询客户信息4.4 新增订单信息4.5 添加跟进子订单 五、免责说明 一、摘要 1.1 项目…
阅读更多...
最新文章

Copyright @ 2022~2023