鸿蒙开发HarmonyOS NEXT (二) 熟悉ArkUI

一、构造函数

构造一个商品类Item,然后利用foreach函数循环渲染

class Item {name: stringimage: ResourceStrprice: numberdiscount: numberconstructor(name: string, image: ResourceStr, price: number, discount: number = 0) {this.name = name;this.image = image;this.price = price;this.discount = discount;}
}//格式化代码快捷键 CTRL + ALT + L
@Entry
@Component
struct Index {@State//商品数据private items: Array<Item> = [new Item('测试1', $r('app.media.head'), 1122, 122),new Item('test2', $r('app.media.startIcon'), 65),new Item('测试3', $r('app.media.background'), 120)]build() { // UI描述,内部声明式UI结构Column({ space: 10 }) {Row() {Text("商品列表").fontWeight(FontWeight.Bold).fontSize(24)}.width('100%').margin({ bottom: 10 })ForEach(this.items,(item: Item) => {Row({ space: 8 }) {Image(item.image).width(100)Column({ space: 4 }) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)if (item.discount) {Text('原件:¥' + item.price).fontSize(14).fontColor('#ccc').decoration({ type: TextDecorationType.LineThrough })Text('折扣价:¥' + (item.price - item.discount)).fontSize(16).fontColor('#F36')Text('补贴:¥' + item.discount).fontSize(16).fontColor('#F36')} else {Text('¥' + item.price).fontSize(16).fontColor('#F36')}}.alignItems(HorizontalAlign.Start)}.padding(10).borderRadius(10).width('100%').shadow(ShadowStyle.OUTER_DEFAULT_SM).backgroundColor('#fff')})}.backgroundColor('#f0f8ff').padding(20).width('100%').height('100%')}
}

二、布局组件List

上述商品列表案例有个致命缺陷——列表超出页面后不可滑动。

List组件不仅可以解决这个问题,还自带编辑、侧滑、分组等功能,在移动端开发中很方便

可参考:

创建列表 (List)-ArkUI官网文档

在案例for循环部分加上List

 List() {ForEach(this.items, (item: Item) => {ListItem() {Row({ space: 8 }) {Image(item.image).width(100)Column({ space: 4 }) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)if (item.discount) {Text('原件:¥' + item.price).fontSize(14).fontColor('#ccc').decoration({ type: TextDecorationType.LineThrough })Text('折扣价:¥' + (item.price - item.discount)).fontSize(16).fontColor('#F36')Text('补贴:¥' + item.discount).fontSize(16).fontColor('#F36')} else {Text('¥' + item.price).fontSize(16).fontColor('#F36')}}.alignItems(HorizontalAlign.Start)}.padding(10).borderRadius(10).width('100%').shadow(ShadowStyle.OUTER_DEFAULT_SM).backgroundColor('#fff')}.margin(5)})}.width('100%')

写在最后:

ArkUI对于有前端基础的同学来说比较容易上手,类似于antdUI和elementUI虽然有的写法不同,但华为提供的devEco编辑器自带提示和鼠标悬浮文档查询功能,检索用法很方便

上一篇 鸿蒙开发HarmonyOS NEXT (一) 入门-CSDN博客

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

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

相关文章

JAVA进阶学习09

文章目录 一、双列集合Map1.1 双列集合介绍1.2 双列集合Map常见API1.3 Map集合遍历方式1.3.1 通过集合的全部键来遍历集合1.3.2 Map集合遍历方式21.3.3 Map集合遍历方式3 二、Map集合的实现类2.1 HashMap类2.2 LinkedHashMap2.3 TreeMap 三、可变参数四、Collections类五、集合…

Vue 2.0 与 3.0区别

Vue.js是一种流行的前端JavaScript框架&#xff0c;用于构建用户界面和单页面应用程序。随着时间的推移&#xff0c;Vue.js已经从Vue2发展到了Vue3&#xff0c;这两个版本在**生命周期、模板组件以及性能**等方面有显著差异。具体分析如下&#xff1a; 1. **生命周期** - **Vue…

恭喜朱雀桥的越南薇妮她牌NFC山竹汁饮料,成为霸王茶姬奶茶主材

朱雀桥NFC山竹汁饮料&#xff1a;荣登霸王茶姬奶茶主材&#xff0c;非遗传承的天然之选 近日&#xff0c;据小编了解到&#xff1a;霸王茶姬欣喜地宣布&#xff0c;成功与朱雀桥达成合作越南薇妮她VINUT牌NFC山竹汁饮料。这款商超产品凭借其卓越的品质与独特的口感&#xff0c…

PostgreSQL安装教程及文件介绍

Ubuntu 安装和配置 PostgreSQL 以 Ubuntu Server 20.04&#xff0c;PostgreSQL 12 版本为例。 1. 安装 使用如下命令&#xff0c;安装指定版本的 PostgreSQL sudo apt install postgresql-12在 Ubuntu 20.04 中安装 PostgreSQL 登录您的 Ubuntu 系统并使用以下 apt 命令更新…

Java web应用性能分析之【prometheus监控指标体系】

Java web应用性能分析之【系统监控工具prometheus】_javaweb服务器性能监控工具-CSDN博客 Java web应用性能分析之【prometheusGrafana监控springboot服务和服务器监控】_grafana 导入 prometheus-CSDN博客 因为篇幅原因&#xff0c;前面没有详细说明Prometheus的监控指标&…

将手机上的已安装应用拷贝出到电脑中

方法一&#xff1a;通过应用管理器 下载并安装应用管理器&#xff1a;可以使用应用管理器如“ES文件浏览器”或“APK Extractor”。 提取APK文件&#xff1a; 打开应用管理器。 找到已安装的应用程序列表。 选择你想要提取的应用程序&#xff0c;然后选择“提取”或“备份”选…

数据结构 —— 哈夫曼树

数据结构 —— 哈夫曼树 哈夫曼树定义构造算法特性应用 哈夫曼编码核心概念工作原理特点 我们今天来看哈夫曼树&#xff1a; 哈夫曼树 哈夫曼树&#xff08;Huffman Tree&#xff09;&#xff0c;是一种特殊的二叉树&#xff0c;由D.A. Huffman在1952年提出&#xff0c;主要用…

[面试题]计算机网络

[面试题]Java【基础】[面试题]Java【虚拟机】[面试题]Java【并发】[面试题]Java【集合】[面试题]MySQL[面试题]Maven[面试题]Spring Boot[面试题]Spring Cloud[面试题]Spring MVC[面试题]Spring[面试题]MyBatis[面试题]Nginx[面试题]缓存[面试题]Redis[面试题]消息队列[面试题]…

ES报错:解决too_many_clauses: maxClauseCount is set to 1024 报错问题

解决too_many_clauses: maxClauseCount is set to 1024 报错问题 问题场景报错信息问题分析解决1. 优化查询2. 增加maxClauseCount3. 改用其他查询类型修改后的查询示例 问题场景 查询语句&#xff1a;查询clcNo分类号包含分类O的所有文档 {"match_phrase_prefix":…

社会与网络的讨论#1

“拒绝心灵鸡汤” 都说人人平等&#xff0c;那请问一个有钱人看到一个扫大街的&#xff0c;能有几个保证不产生厌恶感的&#xff1f; 你能确保&#xff0c;你的工资会比有关系的人的工资高吗&#xff1f; 你进入公司&#xff0c;有有关系的人进入的方便吗&#xff1f; 在学…

特产零售元宇宙:探索虚拟世界的商业机遇

在数字化时代&#xff0c;元宇宙作为一个全新的虚拟世界&#xff0c;正在逐渐改变我们的生活方式和商业模式。随着技术的不断发展&#xff0c;特产零售业也开始尝试进入这个充满无限可能的新领域。本文将探讨特产零售元宇宙的概念、优势以及面临的挑战&#xff0c;并分析其未来…

WAIC2024 | 华院计算邀您共赴2024年世界人工智能大会,见证未来科技革新

在智能时代的浪潮汹涌澎湃之际&#xff0c;算法已成为推动社会进步的核心力量。作为中国认知智能技术的领军企业&#xff0c;华院计算在人工智能的广阔天地中&#xff0c;不断探索、创新&#xff0c;致力于将算法的潜力发挥到极致。在过去的时日里&#xff0c;华院计算不断探索…

Java - Execl自定义导入、导出

1.需求&#xff1a;问卷星答 下图框出区域&#xff0c;为用户自定义字段问题及答案 2.采用技术EasyExcel 模板所在位置如下 /*** 导出模板** param response*/ Override public void exportTemplate(HttpServletResponse response) throws IOException {ClassPathResource c…

Metricbeat和Prometheus监控比较

Metricbeat和Prometheus是两种常见的监控工具&#xff0c;它们都有收集和存储系统和应用程序性能数据的功能&#xff0c;但它们的设计理念、实现方式和适用场景有所不同。以下是它们的相同点和不同点的详细比较&#xff1a; 相同之处 数据收集&#xff1a; Metricbeat 和 Pro…

vue 使用 face-api.js 实现人脸识别

HTML 代码如下 <div class="videoBox" id="videoBox"><video ref="videoPlayer" width="800" height="600" autoplay muted playsinline></video><canvas ref="overlay"></canvas>…

配置 Cmder 到鼠标右键

win Q 快捷键搜索 cmd&#xff0c;以管理员身份运行 在命令行输入 cmder.exe /REGISTER ALL

OpenCloudOS开源的操作系统

OpenCloudOS 是一款开源的操作系统&#xff0c;致力于提供高性能、稳定和安全的操作系统环境&#xff0c;以满足现代计算和应用程序的需求。它结合了现代操作系统设计的最新技术和实践&#xff0c;为开发者和企业提供了一个强大的平台。本文将详细介绍 OpenCloudOS 的背景、特性…

品牌进行3D数字化转型,有哪些优势?

各行业都在经历着从增量市场向存量市场的转变&#xff0c;同时用户的消费观念也日趋成熟&#xff0c;更加注重产品的体验和服务质量。 无论是线上购物平台还是线下实体门店&#xff0c;提供个性化和增强体验感的产品与服务已成为未来发展的核心驱动力&#xff0c;品牌转型也迫…

SyncFolders文件备份—办公人员必备

SyncFolders支持在两个或多个文件夹之间同步文件&#xff0c;用户可以将重要文件同步到多个位置&#xff0c;如备份硬盘、网络共享文件夹或云存储等。通过设定同步规则&#xff0c;可以自动备份和同步更新&#xff0c;减少手动操作的繁琐&#xff0c;确保文件的安全和可访问性。…

uniapp横屏移动端卡片缩进轮播图

uniapp横屏移动端卡片缩进轮播图 效果&#xff1a; 代码&#xff1a; <!-- 简单封装轮播图组件:swiperCard --> <template><swiper class"swiper" circular :indicator-dots"true" :autoplay"true" :interval"10000&quo…