HarmonyOS—声明式UI描述

news2024/11/23 21:32:45

ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑。

创建组件

根据组件构造方法的不同,创建组件包含有参数和无参数两种方式。

说明

创建组件时不需要new运算符。

无参数

如果组件的接口定义没有包含必选构造参数,则组件后面的“()”不需要配置任何内容。例如,Divider组件不包含构造参数:

Column() {
  Text('item 1')
  Divider()
  Text('item 2')
}

有参数

如果组件的接口定义包含构造参数,则在组件后面的“()”配置相应参数。

  • Image组件的必选参数src。
    Image('https://xyz/test.jpg')

    Text组件的非必选参数content。

    // string类型的参数
    Text('test')
    // $r形式引入应用资源,可应用于多语言场景
    Text($r('app.string.title_value'))
    // 无参数形式
    Text()

    变量或表达式也可以用于参数赋值,其中表达式返回的结果类型必须满足参数类型要求。

    例如,设置变量或表达式来构造Image和Text组件的参数。

    Image(this.imagePath)
    Image('https://' + this.imageUrl)
    Text(`count: ${this.count}`)

    配置属性

    属性方法以“.”链式调用的方式配置系统组件的样式和其他属性,建议每个属性方法单独写一行。

  • 配置Text组件的字体大小。
    Text('test')
      .fontSize(12)

    配置组件的多个属性。

    Image('test.jpg')
      .alt('error.jpg')    
      .width(100)    
      .height(100)

    除了直接传递常量参数外,还可以传递变量或表达式。

    Text('hello')
      .fontSize(this.size)
    Image('test.jpg')
      .width(this.count % 2 === 0 ? 100 : 200)    
      .height(this.offset + 100)

    对于系统组件,ArkUI还为其属性预定义了一些枚举类型供开发者调用,枚举类型可以作为参数传递,但必须满足参数类型要求。

    例如,可以按以下方式配置Text组件的颜色和字体样式。

    Text('hello')
      .fontSize(20)
      .fontColor(Color.Red)
      .fontWeight(FontWeight.Bold)

    配置事件

    事件方法以“.”链式调用的方式配置系统组件支持的事件,建议每个事件方法单独写一行。

  • 使用箭头函数配置组件的事件方法。
    Button('Click me')
      .onClick(() => {
        this.myText = 'ArkUI';
      })

    使用匿名函数表达式配置组件的事件方法,要求使用bind,以确保函数体中的this指向当前组件。

    Button('add counter')
      .onClick(function(){
        this.counter += 2;
      }.bind(this))

    使用组件的成员函数配置组件的事件方法。

    myClickHandler(): void {
      this.counter += 2;
    }
    ...
    Button('add counter')
      .onClick(this.myClickHandler.bind(this))

    使用声明的箭头函数,可以直接调用,不需要bind this。

    fn = () => {
      console.info(`counter: ${this.counter}`)
      this.counter++
    }
    ...
    Button('add counter')
      .onClick(this.fn)

    配置子组件

    如果组件支持子组件配置,则需在尾随闭包"{...}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。

  • 以下是简单的Column组件配置子组件的示例。
    Column() {
      Text('Hello')
        .fontSize(100)
      Divider()
      Text(this.myText)
        .fontSize(100)
        .fontColor(Color.Red)
    }

    容器组件均支持子组件配置,可以实现相对复杂的多级嵌套。

    Column() {
      Row() {
        Image('test1.jpg')
          .width(100)
          .height(100)
        Button('click +1')
          .onClick(() => {
            console.info('+1 clicked!');
          })
      }
    }

    那么很多小伙伴肯定主要是查找一些鸿蒙开发相关的内容提升自己,在这里,我为大家准备了一套《Open Harmony4.0&Next》的学习导图从入门到进阶再到南北向开发实战的一整套完整体系,想要学习了解更多鸿蒙开发的相关知识可以借鉴:《做鸿蒙应用开发到底学习些啥?》

    除了以上的知识内容,我还为大家整理了一份《鸿蒙 (Harmony OS)开发学习手册》都是整理成PDF文档方式,分享给大家参考学习:《鸿蒙开发学习指南》

    《鸿蒙 (Harmony OS)开发学习手册》

    一、入门必看

    1. 应用开发导读(ArkTS)

    2. 应用开发导读(Java)

    3.......

    二、HarmonyOS 概念

    1. 系统定义

    2. 技术架构

    3. 技术特性

    4. 系统安全

    5......

    三、如何快速入门?《鸿蒙基础入门开发宝典!》

    1. 基本概念

    2. 构建第一个ArkTS应用

    3. 构建第一个JS应用

    4. ……

    四、开发基础知识

    1. 应用基础知识

    2. 配置文件

    3. 应用数据管理

    4. 应用安全管理

    5. 应用隐私保护

    6. 三方应用调用管控机制

    7. 资源分类与访问

    8. 学习ArkTS语言

    9. ……

    五、基于ArkTS 开发

    1. Ability开发

    2. UI开发

    3. 公共事件与通知

    4. 窗口管理

    5. 媒体

    6. 安全

    7. 网络与链接

    8. 电话服务

    9. 数据管理

    10. 后台任务(Background Task)管理

    11. 设备管理

    12. 设备使用信息统计

    13. DFX

    14. 国际化开发

    15. 折叠屏系列

    16. ……

    更多了解更多鸿蒙开发的相关知识可以参考:《做鸿蒙应用开发到底学习些啥?》

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

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

相关文章

What is `addArgumentResolvers` does in `WebMvcConfigurer` ?

addArgumentResolvers 在SpringMVC框架中,主要用于向Spring容器注册自定义的参数解析器。在处理HTTP请求时,SpringMVC会使用这些参数解析器将请求中的数据(如查询参数、路径变量、表单数据等)转换并注入到控制器方法的参数中。 使…

[C++] VS 2022演练 - 创建和使用静态连接库(Static Lib) (详细图文)

什么是静态连接库? 静态连接库是一种将代码编译成二进制可执行文件时使用的库。在静态链接库中,代码被直接嵌入到可执行文件中,而不是作为外部库单独链接。这意味着当程序运行时,不需要额外的依赖项或库文件。 使用静态连接库的优点是减少了对外部依赖的需求,并且可以更…

【Linux系统编程】环境变量的组织方式

environ和getenv函数 在Linux中,environ是一个全局的外部变量,其类型为char**,存储着系统的环境变量。除了使用主函数中的第三个参数外,我们也可使用environ函数直接访问系统的环境变量。 注意:这里在代码内部使用envi…

使用pdfbox 为 PDF 增加水印

使用pdfbox 为 PDF增加水印https://www.jylt.cc/#/detail?activityIndex2&idbd410851b0a72dad3105f9d50787f914 引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>3.0.1</ve…

【计算机组成与体系结构Ⅱ】Tomasulo 算法模拟和分析(实验)

实验5&#xff1a;Tomasulo 算法模拟和分析 一、实验目的 1&#xff1a;加深对指令级并行性及开发的理解。 2&#xff1a;加深对 Tomasulo 算法的理解。 3&#xff1a;掌握 Tomasulo 算法在指令流出、执行、写结果各阶段对浮点操作指令以及 load 和 store 指令进行了什么处…

网工每日一练(1月15日)

1.某计算机系统由下图所示的部件构成&#xff0c;假定每个部件的千小时可靠度为R&#xff0c;则该系统的千小时的可靠度为 ( D ) 。 2.以下IP地址中&#xff0c;属于网络 201.110.12.224/28 的主机IP是&#xff08; B &#xff09;。 A.201.110.12.224 B.201.110.12.238 C.20…

1. SpringBoot3 基础

文章目录 1. SpringBoot 概述2. SpringBoot 入门3. SpringBoot 配置文件3.1 SpringBoot 配置文件基本使用3.2 yml 配置文件 4. SpringBoot 整合 Mybatis5. Bean 管理5.1 Bean 扫描5.2 Bean 注册5.3 注册条件 6. 组合注解7. 自动配置原理8. 自定义 Starter 1. SpringBoot 概述 …

蓝桥杯(C++ 矩形总面积 错误票据 分糖果1 三国游戏 分糖果2)

目录 一、矩形总面积 思路&#xff1a; 代码&#xff1a; 二、错误票据 思路&#xff1a; 代码&#xff1a; 三、分糖果1 思路&#xff1a; 代码&#xff1a; 四、三国游戏 思路&#xff1a; 代码&#xff1a; 五、分糖果2 思路&#xff1a; 代码&#xff1a;…

LLM:Sinusoidal位置编码

1&#xff1a;什么是大模型的外推性&#xff1f; 外推性是指大模型在训练时和预测时的输入长度不一致&#xff0c;导致模型的泛化能力下降的问题。例如&#xff0c;如果一个模型在训练时只使用了512个 token 的文本&#xff0c;那么在预测时如果输入超过512个 token&#xff0…

「云渲染科普」效果图渲染吃显卡还是cpu

准确来说看渲染器属于CPU渲染、还是显卡渲染。通常情况下&#xff0c;不少的渲染工作为了追求渲染效果的和速度&#xff0c;同时利用 CPU 和 GPU 的计算资源&#xff0c;达到最佳的效果图呈现方式。 一、效果图显卡渲染与cpu渲染对比 1、CPU(中央处理器)&#xff1a; - 传统的…

【数学建模美赛M奖速成系列】数据可视化方法(一)

数据可视化方法 写在前面山脊图优点缺点实现matlabpython 气泡矩阵图实现matlabpython 后续 写在前面 最近开始更新一个新的系列科研绘图&#xff0c;在同一个竞赛下&#xff0c;大家都近乎相同的解题思路下。之所以能出现一等二等三等奖的区别很大部分都在于结果的可视化&…

【总结】Linux命令中文帮助手册

1. 为什么要总结Linux命令中文帮助手册 Linux 官方并不提供中文的 help、man 帮助手册。网络上已有的前人翻译过的中文手册版本比较老&#xff0c;且翻译存在误差。从记忆角度来看&#xff0c;Linux 很多命令都不一定记得住详细的用法&#xff0c;易遗忘&#xff0c;缺少经验总…

计算机系统基础知识揭秘:硬件、处理器和校验码

计算机系统基础知识揭秘&#xff1a;硬件、处理器和校验码 一、计算机系统基础知识的重要性二、计算机系统硬件2.1、内存和存储设备2.2、输入输出设备 三、中央处理器&#xff08;CPU&#xff09;3.1、运算器3.2、控制器3.3、寄存器组3.4、多核CPU 四、数据表示4.1、原码、反码…

一文极速了解【自注意力机制】

当下如火如荼的大模型&#xff0c;其中的关键技术就是注意力机制&#xff08;Attention&#xff09;&#xff0c;于2015年提出。2017年的“Attention is all you need”一文提出了Transformer模型&#xff0c;去掉RNN&#xff0c;只保留注意力&#xff0c;性能吊打所有机器翻译…

Android Studi安卓读写NDEF智能海报源码

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?id615391857885&spma1z10.5-c.w4002-21818769070.11.1f60789ey1EsPH <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmln…

Intel杀回车载计算领域,极氪首发其第一代AI SoC

作者 |德新 编辑 |王博 Intel低调地重新杀回车载计算领域。 在两个月前&#xff0c;在上海举办的进博会上&#xff0c;Intel对外展示了基于新一代酷睿核心打造的智能座舱平台。 在此之前&#xff0c;这家芯片巨头任命了服役公司20多年的老将Jack Weast作为汽车业务的全球负责…

Zookeeper启动报错常见问题以及常用zk命令

Zk常规启动的命令如下 sh bin/zkServer.sh start 启动过程如果存在失败&#xff0c;是没办法直接看出什么问题&#xff0c;只会报出来 Starting zookeeper … FAILED TO START 可以用如下命令启动&#xff0c;便于查看zk启动过程中的详细错误 sh bin/zkServer.sh start-for…

深度学习中Numpy的一些注意点(多维数组;数据类型转换、数组扁平化、np.where()、np.argmax()、图像拼接、生成同shape的图片)

文章目录 1多维数组压缩维度扩充维度 2numpy类型转换深度学习常见的float32类型。 3数组扁平化4np.where()的用法5np.argmax()6图像拼接7生成同shape的图片&#xff0c;指定数据类型 1多维数组 a.shape(3,2);既数组h3&#xff0c;w2 a.shape(2,3,2);这里第一个2表示axis0维度上…

《30天自制操作系统》学习笔记(七)

先体验一下编译仿真方法&#xff1a; 30天自制操作系统光盘代码在下面链接&#xff0c;但是没有编译仿真工具&#xff1a; https://gitee.com/zhanfei3000/30dayMakeOS 仿真工具在下面链接&#xff1a; https://gitee.com/909854136/nask-code-ide 这是一个集成的编译仿真工…

综述:自动驾驶中的 4D 毫米波雷达

论文链接&#xff1a;《4D Millimeter-Wave Radar in Autonomous Driving: A Survey》 摘要 4D 毫米波 (mmWave) 雷达能够测量目标的距离、方位角、仰角和速度&#xff0c;引起了自动驾驶领域的极大兴趣。这归因于其在极端环境下的稳健性以及出色的速度和高度测量能力。 然而…