鸿蒙开发之声明式UI描述

越凸越爱敲

已于 2024-05-08 14:45:56 修改

阅读量1.6k

点赞数 45

文章标签： harmonyos 华为

于 2024-05-04 10:30:00 首次发布

本文链接：https://blog.csdn.net/m0_61170978/article/details/138345337

版权

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

创建组件

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

无参数
如果组件的接口定义没有包含必选构造参数，则组件后面的“()”不需要配置任何内容。例如，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('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!');
      })
  }
}

最后

鸿蒙开发正当时，现在入手正是好时机。

还在犹豫不决的朋友们，小编在这里建议大家早点入手！

在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友，另外一些鸿蒙开发的资料文档也顺便分享给大家，扫下方二维码就能免费送呢！

鸿蒙学习路线图

路线图适合人群：

IT开发人员：想要拓展职业边界，享受新技术带来的溢价红利
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能

HarmonyOS 4.0 APP Developer

在这里插入图片描述

OpenHarmony 5.0 Next视音频

在这里插入图片描述

OpenHarmony 5.0 Next进阶

在这里插入图片描述

OpenHarmony 5.0 Next分布式

在这里插入图片描述

学习资料

内容概要：《鸿蒙零基础入门学习指南》、《鸿蒙开发学习之UI》、《鸿蒙开发学习之Web》、《鸿蒙开发学习之应用模型》

内容特点：条理清晰，含图像化表示更加易懂。

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙零基础入门学习指南》

一、快速入门

适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用，快速了解工程目录的主要文件，熟悉HarmonyOS应用开发流程。

开发准备
构建第一个ArkTS应用（Stage模型）
构建第一个ArkTS应用（FA模型）
构建第一个JS应用（FA模型）

二、开发基础知识

应用程序包基础知识
应用配置文件（Stage模型）
应用配置文件概述（FA模型）

三、资源分类与访问

应用开发过程中，经常需要用到颜色、字体、间距、图片等资源，在不同的设备或配置中，这些资源的值可能不同。

资源分类与访问
创建资源目录和资源文件
资源访问

四、学习ArkTs语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

初识ArkTS语言
基本语法
状态管理
其他状态管理
渲染控制

领取方式：扫描下方二维码即可免费领取！！！

[](https://blog.csdn.net/m0_56144365/article/details/136156914?spm=1001.2014.3001.5501)《鸿蒙开发学习之UI》 --------------------------------------------------------------------------------------------------

一、方舟开发框架（ArkUI）概述

二、基于ArkTS声明式开发范式

1、UI开发（ArkTS声明式开发范式）概述
2、开发布局
3、添加组件
4、显示图片
5、使用动画
6、支持交互事件
7、性能提升的推荐方法

三、兼容JS的类Web开发范式

1、概述
2、框架说明
3、构建用户界面
4、常见组件开发指导
5、动效开发指导
6、自定义组件

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之Web》

Web组件概述

使用Web组件加载页面

设置基本属性和事件

设置深色模式
上传文件
在新窗口中打开页面
管理位置权限

在应用中使用前端页面JavaScript

应用侧调用前端页面函数
前端页面调用应用侧函数
建立应用侧与前端页面数据通道
管理页面跳转及浏览记录导航
管理Cookie及数据存储
自定义页面请求响应
使用Devtools工具调试前端页面

ArkTS语言基础类库概述

并发

并发概述
使用异步并发能力进行开发
使用多线程并发能力
容器类库
XML生成、解析、与转换
通知

窗口管理

窗口开发概述
管理应用窗口（Stage模型）
管理应用窗口（FA模型）

WebGL

概述
WebGL开发指导

媒体

媒体应用开发概念
图片

安全

访问控制
ohos.permission.USE_BLUETOOTH
ohos.permission.DISCOVER_BLUETOOTH
ohos.permission.MANAGE_BLUETOOTH
ohos.permission.INTERNET
ohos.permission.INTERNET
…

网络与连接

网络管理
IPC与RPC通信

电话服务

电话服务开发概述
跳转拨号页面
获取当前蜂窝网络信号信息

数据管理

数据管理概述
应用数据持久化
场景介绍
运作机制
约束限制
接口说明
…

文件管理

文件管理概述
应用文件
用户文件
分布式文件系统

后台任务管理

后台任务总体概述
短时任务
长时任务
延时任务
代理提醒

设备管理

USB服务
位置服务
传感器
分布式跟踪开发指导
错误管理
…

在这里插入图片描述

国际化

国际化开发概述
Intl开发指导
I18n开发指导

应用测试

自动化测试框架使用指南

Native API相关指导

Native API在应用工程中的使用指导
Drawing开发指导
Rawfile开发指导
NativeWindow 开发指导
…

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之应用模型》

应用模型概述

应用模型的构成要素
应用模型解读

Stage模型开发指导

Stage模型开发概述
Stage模型应用组件

FA模型开发指导

FA模型开发概述
FA模型应用组件配置
进程模型
线程模型

领取方式：扫描下方二维码即可免费领取！！！

越凸越爱敲

关注

45
点赞
踩
44

收藏

觉得还不错? 一键收藏
0
评论
鸿蒙开发之声明式UI描述

鸿蒙开发正当时，现在入手正是好时机。还在犹豫不决的朋友们，小编在这里建议大家早点入手！在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友，另外一些鸿蒙开发的资料文档也顺便分享给大家，扫下方二维码就能免费送呢！1、UI开发（ArkTS声明式开发范式）概述2、开发布局3、添加组件4、显示图片5、使用动画6、支持交互事件7、性能提升的推荐方法设置深色模式上传文件在新窗口中打开页面管理位置权限并发概述使用异步并发能力进行开发使用多线程并发能力容器类库。
复制链接

扫一扫