鸿蒙Next声明式UI描述

一、引言

在鸿蒙Next开发中,ArkTS以声明方式组合和扩展组件来描述应用程序的UI,为开发者提供了高效、灵活的方式来构建用户界面。本文将详细介绍鸿蒙Next中声明式UI的相关内容,包括组件创建、属性配置、事件配置以及子组件配置等方面,帮助开发者更好地理解和运用这一技术。

二、创建组件

(一)无参数创建

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

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

(二)有参数创建

若组件的接口定义包含构造参数,则在组件后面的“()”需要配置相应参数。如Image组件的必选参数src,以及Text组件的非必选参数content(有多种赋值方式):

  1. 直接赋值字符串
    • Image('https://xyz/test.jpg')
    • Text('test')
  2. 使用$r形式引入应用资源(适用于多语言场景)
    • Text($r('app.string.title_value'))
  3. 无参数形式
    • Text()
  4. 使用变量或表达式赋值
    • 变量赋值:Image(this.imagePath)
    • 表达式赋值:Image('https://' + this.imageUrl)Text(count: ${this.count})

三、配置属性

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

  1. 配置单个属性
    • 配置Text组件字体大小:Text('test').fontSize(12)
  2. 配置多个属性
    • Image('test.jpg').alt('error.jpg').width(100).height(100)
  3. 使用变量或表达式配置属性
    • Text('hello').fontSize(this.size)
    • Image('test.jpg').width(this.count % 2 === 0? 100 : 200).height(this.offset + 100)
  4. 使用枚举类型配置属性(针对系统组件)
    • 配置Text组件颜色和字体样式:Text('hello').fontSize(20).fontColor(Color.Red).fontWeight(FontWeight.Bold)

四、配置事件

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

  1. 使用箭头函数配置事件方法
    • Button('Click me').onClick(() => {this.myText = 'ArkUI';})
  2. 使用箭头函数表达式配置事件方法
    • Button('add counter').onClick(() => {this.counter += 2;})
  3. 使用组件的成员函数配置事件方法(需bind this,不推荐)
    • 定义成员函数:
      myClickHandler(): void {this.counter += 2;
      }
      
    • 绑定事件:Button('add counter').onClick(this.myClickHandler.bind(this))
  4. 使用声明的箭头函数配置事件方法(可直接调用,不需要bind this)
    • 声明箭头函数:
      fn = () => {console.info(`counter: ${this.counter}`)this.counter++
      }
      
    • 绑定事件:Button('add counter').onClick(this.fn)

注意:箭头函数内部的this是词法作用域,由上下文确定。匿名函数可能会有this指向不明确问题,在ArkTS中不允许使用。

五、配置子组件

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

  1. 简单Column组件配置子组件示例
    Column() {Text('Hello').fontSize(100)Divider()Text(this.myText).fontSize(100).fontColor(Color.Red)
    }
    
  2. 容器组件多级嵌套示例
    Column() {Row() {Image('test1.jpg').width(100).height(100)Button('click +1').onClick(() => {console.info('+1 clicked!');})}
    }
    

通过以上对鸿蒙Next声明式UI描述中组件创建、属性配置、事件配置和子组件配置的介绍,开发者可以更加熟练地运用这些技术构建出功能丰富、交互性强的用户界面,为用户提供优质的应用体验。

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

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

相关文章

使用 Wireshark 和 Lua 脚本解析通讯报文

在复杂的网络环境中,Wireshark 凭借其强大的捕获和显示功能,成为协议分析不可或缺的工具。然而,面对众多未被内置支持的协议或需要扩展解析的场景,Lua 脚本的引入为Wireshark 提供了极大的灵活性和可扩展性。本文将详细介绍如何使…

宝塔SSL证书申请失败,报错:申请SSL证书错误 module ‘OpenSSL.crypto‘ has no attribute ‘sign‘(已解决)

刚安装宝塔申请SSL就报错:申请SSL证书错误 module OpenSSL.crypto has no attribute sign 面板、插件版本:9.2.0 系统版本:Alibaba Cloud Linux 3.2104 LTS 问题:申请SSL证书错误 module OpenSSL.crypto has no attribute sign…

自动驾驶控制与规划——Project 2: 车辆横向控制

目录 零、任务介绍一、环境配置二、算法三、代码实现四、效果展示 零、任务介绍 补全src/ros-bridge/carla_shenlan_projects/carla_shenlan_stanley_pid_controller/src/stanley_controller.cpp中的TODO部分。 一、环境配置 上一次作业中没有配置docker使用gpu,…

双内核架构 Xenomai 4 安装教程

Xenomai 4是一种双内核架构, 继承了Xenomai系列的特点,通过在Linux内核中嵌入一个辅助核心(companion core),来提供实时能力。这个辅助核心专门处理那些需要极低且有界响应时间的任务。 本文将在官网教程(https://evlproject.org/…

MySQL学习之DML操作

目录 插入 删除 修改 数据库事务 事务的特征(ACID原则) 原子性 一致性 隔离性 持久性 事务隔离级别 读未提交 读已提交 可重复读 序列化 脏读 虚读 幻读 插入 insert into 表名 values(); 要求插入数据的数量,类型要和定义…

clearvoice 语音降噪、语音分离库

参看: https://github.com/modelscope/ClearerVoice-Studio/tree/main ClearVoice 提供了一个统一的推理平台,用于语音增强、语音分离以及视听目标说话人提取。 代码参看: https://github.com/modelscope/ClearerVoice-Studio/tree/main/clearvoice https://github.com/mode…

linux打包qt程序

Linux下Qt程序打包_linuxdeployqt下载-CSDN博客 Linux/Ubuntu arm64下使用linuxdeployqt打包Qt程序_linuxdeployqt arm-CSDN博客 本篇文章的系统环境是 : 虚拟机ubuntu18.04 用下面这个qmake路径 进行编译 在 ~/.bashrc 文件末尾,qmake目录配置到文件末尾 将上图中…

qt-C++笔记之自定义类继承自 `QObject` 与 `QWidget` 及开发方式详解

qt-C笔记之自定义类继承自 QObject 与 QWidget 及开发方式详解 code review! 参考笔记 1.qt-C笔记之父类窗口、父类控件、对象树的关系 2.qt-C笔记之继承自 QWidget和继承自QObject 并通过 getWidget() 显示窗口或控件时的区别和原理 3.qt-C笔记之自定义类继承自 QObject 与 QW…

教师工作量管理系统

源代码地址:31、教师工作量管理系统 目录 1系统概述 1.1 研究背景 1.2研究目的 1.3系统设计思想 2相关技术 2.1 MYSQL数据库 2.2 B/S结构 2.3 Spring Boot框架简介 3系统分析 3.1可行性分析 3.1.1技术可行性 3.1.2经济可行性 3.1.3操作可行性 3.2系统性…

LiveData源码研究

LiveData 源码分析 前言 用过MVVM的大概知道LiveData可以感知组件的生命周期,当页面活跃时,更新页面数据, 当页面处于非活跃状态,它又会暂停更新,还能自动注册和注销观测者,能有效避免内存泄漏和不必要的…

vscode+msys2+clang+xmake c++开发环境搭建

转载请标明出处:小帆的帆的专栏 安装msys2 下载msys2安装包:清华源下载地址安装msys2:安装目录,C:\Softwares\msys64 安装cling工具链,xmake !!!在开始菜单中启动MSYS2 CLANG64,…

VMware ubuntu16.04怎么设置静态IP联网

1.将VMware桥接到当前电脑使用的网络上面; 2.点击网络符号,编辑连接; 3.双击有线连接1; 4.选择IPv4设置,将地址,子网掩码,网关,DNS服务器设置好,保存; 5.在终…

金蝶云苍穹踩过的坑(慢慢更新)

IDEA不能用最新版,不然搜不到金蝶的插件。 我用的是2024.1.7/2023.1.7 IDEA里增加金蝶插件库的地址也变了,现在是 https://tool.kingdee.com/kddt/idea-updatePlugins.xml 金蝶云苍穹部署在服务器 MAC本地IDEA调试的时候,登录N次能成功一次…

【人工智能学习之HDGCN训练自己的数据集】

【人工智能学习之HDGCN训练自己的数据集】 HD-GCN准备事项项目代码开源数据集第一行:帧数第二行:body数第三行:关节附加信息第四行:关节数5-29行:每个关节的数据之后的帧总结: 自定义2D数据集模型移植与修改…

Trimble天宝三维激光扫描仪在建筑工程竣工测量中的应用【沪敖3D】

竣工测量是建筑项目竣工阶段的一个至关重要的环节,它为建筑工程的质量验收和成果核查提供了核心的参考依据。传统的竣工测量方法,如全站仪测量,主要依赖于现场人工操作,存在一些明显的局限性,例如作业时间长、工作量大…

Unity A*算法实现+演示

注意: 本文是对基于下方文章链接的理论,并最终代码实现,感谢作者大大的描述,非常详细,流程稍微做了些改动,文末有工程网盘链接,感兴趣的可以下载。 A*算法详解(个人认为最详细,最通俗易懂的一…

MoonBit 核心编译器正式开源!

由 IDEA研究院基础软件中心打造的 MoonBit (月兔)AI 原生开发平台,今日宣布正式开源其核心的编译器 WebAssembly(简称“Wasm”) 后端。开发者现在可以利用 MoonBit 的能力做性能优化,且直接参与 MoonBit 的…

JS使用random随机数实现简单的四则算数验证

1.效果图 2.代码实现 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</ti…

linux0.11源码分析第一弹——bootset.s内容

&#x1f680;前言 本系列主要参考的《linux源码趣读》&#xff0c;也结合之前《一个64位操作系统的设计与实现》的内容结合起来进行整理成本系列博客。在这一篇博客对应的是《linux源码趣读》第一~四回 目录 &#x1f680;前言&#x1f3c6;启动后的第一步&#x1f4c3;启动区…

OpenIPC开源FPV之Adaptive-Link天空端代码解析

OpenIPC开源FPV之Adaptive-Link天空端代码解析 1. 源由2. 框架代码2.1 消息机制2.2 超时机制 3. 报文处理3.1 special报文3.2 普通报文 4. 工作流程4.1 Profile 竞选4.2 Profile 研判4.2.1 回退策略4.2.2 保持策略 4.3 Profile 应用 5. 总结6. 参考资料7. 补充资料7.1 RSSI 和 …