【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(六)

课程地址: 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程,一套精通鸿蒙应用开发

(本篇笔记对应课程第 12 - 13节)

P12《11.ArkUI组件-循环控制》

在这里插入图片描述

在这里插入图片描述

forEach() 方法的使用方式:

在这里插入图片描述

在预览界面点击红框的按钮,可以查看页面组件树结构:

在这里插入图片描述
在这里插入图片描述

将写好的静态代码改为使用forEach()循环渲染多项:

在这里插入图片描述

页面中定义好数据:

在这里插入图片描述

使用forEach()遍历数据:

在这里插入图片描述

需求新增:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

总结:

在这里插入图片描述

实践:

在这里插入图片描述

class Item {
  name : string
  image : ResourceStr
  price : number
  discount : number

  constructor(name:string, image:ResourceStr, price:number, discount:number=0) {
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }
}

@Entry
@Component
struct ItemsPage {
  // 商品数据
  private items: Array<Item> = [
    new Item('FreeBuds 5i', $r('app.media.1'), 449),
    new Item('FreeBuds Pro 3典藏版', $r('app.media.2'), 1449, 500),
    new Item('问界 新M5', $r('app.media.3'), 291800),
    new Item('WATCH 4 Pro', $r('app.media.4'), 4999),
    new Item('华为智慧屏 S5', $r('app.media.5'), 5799)
  ]

  build(){
    Column(){
      Row(){
        Text('商品列表')
          .fontSize(28)
      }
        .width('100%')
        .height(60)
        .padding({left:14, right:14})
        .justifyContent(FlexAlign.Start)

      Column({space:10}){
        ForEach(this.items,
          (item:Item) => {
            Row({space:10}){
              Image(item.image)
                .width(100)
              Column(){
                Text(item.name)
                  .fontSize(18)
                  .fontColor('#444')
                  .fontWeight(FontWeight.Bold)

                if(item.discount){
                  Text('原价¥:' + item.price)
                    .fontSize(18)
                    .fontColor('#888')
                    .decoration({type:TextDecorationType.LineThrough})
                  Text('折扣价¥:' + (item.price - item.discount))
                    .fontSize(18)
                    .fontColor('#6d6d')
                  Text('补贴¥:' + item.discount)
                    .fontSize(18)
                    .fontColor('#6d6d')
                }else{
                  Text('¥:' + item.price)
                    .fontSize(18)
                    .fontColor('#6d6d')
                }


              }
                .alignItems(HorizontalAlign.Start)
            }
            .width('100%')
            .padding({left:14, right:14})
            .backgroundColor('#fff')
            .borderRadius(8)
          }
        )
      }
        .padding({left:10,right:10})


    }
      .width('100%')
      .height('100%')
      .backgroundColor('#eee')
  }
}

P13《12.ArkUI组件-List》

在这里插入图片描述

Column布局当列表数量过多超出屏幕之后,不能支持滚动效果:

在这里插入图片描述

这时就需要用List组件替代Column组件了。注意:List是容器组件,它里面一定要有一个 ListItem ,但ListItem 不是容器组件。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

实践:

在这里插入图片描述

class Item {
  name : string
  image : ResourceStr
  price : number
  discount : number

  constructor(name:string, image:ResourceStr, price:number, discount:number=0) {
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }
}

@Entry
@Component
struct ItemsPage {
  // 商品数据
  private items: Array<Item> = [
    new Item('FreeBuds 5i', $r('app.media.1'), 449),
    new Item('FreeBuds Pro 3典藏版', $r('app.media.2'), 1449, 500),
    new Item('问界 新M5', $r('app.media.3'), 291800),
    new Item('WATCH 4 Pro', $r('app.media.4'), 4999),
    new Item('华为智慧屏 S5', $r('app.media.5'), 5799),
    new Item('华为智慧屏 S5', $r('app.media.5'), 5799),
    new Item('华为智慧屏 S5', $r('app.media.5'), 5799),
    new Item('华为智慧屏 S5', $r('app.media.5'), 5799)
  ]

  build(){
    Column(){
      Row(){
        Text('商品列表')
          .fontSize(28)
      }
        .width('100%')
        .height(60)
        .padding({left:14, right:14})
        .justifyContent(FlexAlign.Start)

      List({space:10}){
        ForEach(this.items,
          (item:Item) => {
            ListItem(){
              Row({space:10}){
                Image(item.image)
                  .width(100)
                Column(){
                  Text(item.name)
                    .fontSize(18)
                    .fontColor('#444')
                    .fontWeight(FontWeight.Bold)

                  if(item.discount){
                    Text('原价¥:' + item.price)
                      .fontSize(18)
                      .fontColor('#888')
                      .decoration({type:TextDecorationType.LineThrough})
                    Text('折扣价¥:' + (item.price - item.discount))
                      .fontSize(18)
                      .fontColor('#6d6d')
                    Text('补贴¥:' + item.discount)
                      .fontSize(18)
                      .fontColor('#6d6d')
                  }else{
                    Text('¥:' + item.price)
                      .fontSize(18)
                      .fontColor('#6d6d')
                  }


                }
                .alignItems(HorizontalAlign.Start)
              }
              .width('100%')
              .padding({left:14, right:14})
              .backgroundColor('#fff')
              .borderRadius(8)
            }
          }
        )
      }
        .padding({left:10,right:10})
        .layoutWeight(1)


    }
      .width('100%')
      .height('100%')
      .backgroundColor('#eee')
  }
}

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

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

相关文章

煤矿综合自动化智能监控系统

系统概述 建设煤矿井上下工业环网、工业数据集成平台、排水、供电、运输、通风、压风、瓦斯抽放、采掘、智能洗煤厂等智能自动化控制系统&#xff0c;利用多种软硬件接口(OPC协议、驱动通讯、数据库、文本文件、DDE/NETDDE、子网等)&#xff0c;构建全矿井统一、稳定、高效的数…

vue2 实现echarts图表进入可视区域后再加载动画,以及 使用了resize之后,动画失效问题解决

Intersection Observer API 是一个现代的浏览器 API&#xff0c;用于监测一个或多个目标元素与其祖先元素或视窗&#xff08;viewport&#xff09;之间的交叉状态&#xff08;intersection&#xff09;的变化。它可以有效地监听元素是否进入或离开可视区域&#xff0c;从而实现…

使用OkHttp 缓存 API 调用提高Android应用性能

使用OkHttp 缓存 API 调用提高Android应用性能 坦率地说&#xff0c;我们都遇到过这样的情况——焦急地刷新应用&#xff0c;看着加载图标不停地旋转&#xff0c;等待那个至关重要的 API 响应。这样的等待我们已经是炉火纯青了&#xff0c;是吧&#xff1f;手指有节奏地轻敲屏…

记录些RAG-Fusion、Agent、NL2SQL的问题

RAG-Fusion RAG-Fusion 的实现原理 Query Duplication with a Twist&#xff1a;用 LLM 根据用户的 Query 生成几个相关的但不同的 Queries。Vector Search Unleashed&#xff1a;对原 Query 和生成的 Queries 都进行向量&#xff08;或者其他方式的&#xff09;搜索。Intell…

基于Springboot的滑雪场管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的滑雪场管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&a…

摩根大通推出创新工具 FlowMind,引领金融自动化新变革

近日&#xff0c;摩根大通人工智能研究部推出了一款极具创新性的工具——FlowMind&#xff0c;为金融行业带来了全新的工作模式和效率提升。 FlowMind 能够自动化金融工作流程&#xff0c;在信贷审批、风险评估、合规监测等重要任务中发挥着关键作用。它利用 GPT 自动生成工作…

泽攸科技无掩膜光刻机在MEMS压力传感器制造中的应用

在当今的科技快速发展时代&#xff0c;微电子机械系统&#xff08;MEMS&#xff09;技术已成为推动现代传感器技术革新的关键力量。MEMS压力传感器&#xff0c;作为其中的重要分支&#xff0c;广泛应用于生物医学、航空航天、汽车工业等多个领域。随着对传感器性能要求的不断提…

探索Jellyfin:支持Android的自由开源的媒体服务器平台

探索Jellyfin&#xff1a;支持Android的自由开源的媒体服务器平台 I. 简介 A. 什么是Jellyfin&#xff1f; Jellyfin是一个自由开源的媒体服务器平台&#xff0c;旨在让用户能够自主管理和流式传输他们的媒体内容。与许多闭源的商业媒体服务器解决方案不同&#xff0c;Jelly…

基于ESP32—CAM物联网WIFI小车

一.功能概述 摄像头的画面可以实时的传输到&#xff0c;点灯科技APP的手机端&#xff0c;这样可以实时查看周围环境的状况&#xff0c;灯光不足&#xff0c;画面不清晰时可以打开灯光照明。手机端有左转、右转、前进、后退、停止的按钮。可以根据自己需要&#xff0c;来控制小车…

美国站群服务器上常见的操作系统选择指南

美国站群服务器上常见的操作系统选择指南 美国站群服务器的选择操作系统对于服务器的性能和功能至关重要。本文将为您介绍在美国站群服务器上常见的操作系统选择指南&#xff0c;以帮助您做出明智的决策。 在选择美国站群服务器时&#xff0c;选择合适的操作系统是至关重要的…

SMTP服务器搭建的注意事项?如何配置SMTP?

SMTP服务器搭建的步骤有哪些&#xff1f;SMTP服务器的搭建方法&#xff1f; SMTP服务器作为电子邮件传输的核心组件&#xff0c;其搭建过程中的每一个细节都至关重要。AokSend将详细探讨SMTP服务器搭建的注意事项&#xff0c;帮助您轻松搭建一个高效、安全的SMTP服务器。 SMT…

Flutter创建自定义的软键盘

参考代码&#xff1a; Flutter - Create Custom Keyboard Examples 本文贴出的代码实现了一个输入十六进制数据的键盘&#xff1a; &#xff08;1&#xff09;支持长按退格键连续删除字符&#xff1b; &#xff08;2&#xff09;可通过退格键删除选中的文字&#xff1b; &…

02 - 步骤 Kafka consumer

简介 Kafka consumer 步骤&#xff0c;用于连接和消费 Apache Kafka 中的数据,它可以作为数据管道的一部分&#xff0c;将 Kafka 中的数据提取到 Kettle 中进行进一步处理、转换和加载&#xff0c;或者将其直接传输到目标系统中。 使用 场景 我需要订阅一个Kafka的数据&…

网络安全之密码学技术

文章目录 网络信息安全的概念数据加密|解密概念密码学概论密码学分类古典密码学现代密码学 现代密码学的相关概念对称加密算法对称加密算法—DES对称加密算法—3DES对称加密算法—AES对称加密算法—IDEA 非对称加密算法非对称加密算法—RSA非对称加密算法—ElGamal非对称加密算…

Reactor Netty-响应式编程-010

&#x1f917; ApiHug {Postman|Swagger|Api...} 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱&#xff0c;有温度&#xff0c;有质量&#xff0c;有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace 为什么不…

Objective-C大爆炸:从零到单例模式

oc学习笔记&#xff08;一&#xff09; 文章目录 oc学习笔记&#xff08;一&#xff09;oc与c语言的区别#import的用法foundation框架NSLog函数NSString类型符号的作用oc中的数据类型 类与对象概念&#xff1a; 创建第一个类类的定义类的实现类加载对象的产生和使用 self语法id…

GaussDB数据库事务管理

一、引言 事务管理是数据库系统中至关重要的一部分&#xff0c;它确保了数据库的一致性和可靠性。在GaussDB数据库中&#xff0c;事务管理不仅遵循传统的ACID特性&#xff0c;还提供了一些高级功能。本文将深入探讨GaussDB数据库事务管理的各个方面。 二、事务的基本概念 2.1…

前端页面单元测试最佳策略:全面涵盖逻辑、组件、流程、UI及性能优化测试,全面保障软件应用的质量

页面级别的测试要求我们从更宏观的角度审视应用&#xff0c;不仅关注单个组件的正确性&#xff0c;还要确保组件间的协作无误&#xff0c;以及用户在应用中的完整体验。通过集成测试、E2E测试和场景测试&#xff0c;我们可以更全面地覆盖应用的各种使用情况&#xff0c;提高软件…

Educational Codeforces Round 165 (Rated for Div. 2) (C、D)

1969C - Minimizing the Sum 题意&#xff1a; 思路&#xff1a;观察到操作数很小&#xff0c;最值问题操作数很容易想到dp&#xff0c;用表示第个元素&#xff0c;操作了次的最小值总和&#xff0c;转移的时候枚举连续操作了几次即可&#xff0c;而连续操作了几次即将全部变成…

机器学习:基于Sklearn、XGBoost框架,使用逻辑回归、支持向量机和XGBClassifier来诊断并预测一个人是否患有自闭症

前言 系列专栏&#xff1a;机器学习&#xff1a;高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目&#xff0c;每个项目都处理一组不同的问题&#xff0c;包括监督和无监督学习、分类、回归和聚类&#xff0c;而且涉及创建深度学…