鸿蒙入门实战-ArkTS开发

news2024/11/16 8:36:03

声明式UI基本概念

应用界面是由一个个页面组成，ArkTS是由ArkUI框架提供，用于以声明式开发范式开发界面的语言。

声明式UI构建页面的过程，其实是组合组件的过程，声明式UI的思想，主要体现在两个方面：

  • 描述UI的呈现结果，而不关心过程
  • 状态驱动视图更新

类似苹果的SwiftUI中通过组合视图View，安卓Jetpack Compose中通过组合@Composable函数，ArkUI作为HarmonyOS应用开发的UI开发框架，其使用ArkTS语言构建自定义组件，通过组合自定义组件完成页面的构建。

自定义组件的组成

ArkTS通过struct声明组件名，并通过@Component和@Entry装饰器，来构成一个自定义组件。

使用@Entry和@Component装饰的自定义组件作为页面的入口，会在页面加载时首先进行渲染。

@Entry
@Component
struct ToDoList {...}

例如ToDoList组件对应如下整个代办页面。

图1ToDoList待办列表

使用@Component装饰的自定义组件，如ToDoItem这个自定义组件则对应如下内容，作为页面的组成部分。

@Component
struct ToDoItem {...}

图2ToDoItem

在自定义组件内需要使用build方法来进行UI描述。

1.  @Entry
2.  @Component
3.  struct ToDoList
4.  ...
5.  build() {
6.  ...
7.  } 
8.  }

build方法内可以容纳内置组件和其他自定义组件，如Column和Text都是内置组件，由ArkUI框架提供，ToDoItem为自定义组件，需要开发者使用ArkTS自行声明。

1.  @Entry
2.  @Component
3.  struct ToDoList {
4.  ...
5.  build() {
6.  Column(...) {
7.  Text(...)
8.  ...
9.  ForEach(...{
10.  TodoItem(...)
11.  },...)
12.  }
13.  ...
14.  }
15.  }

配置属性与布局

自定义组件的组成使用基础组件和容器组件等内置组件进行组合。但有时内置组件的样式并不能满足我们的需求，ArkTS提供了属性方法用于描述界面的样式。属性方法支持以下使用方式：

  • 常量传递 例如使用fontSize(50)来配置字体大小。
1.  Text('Hello World')
    2.  .fontSize(50)
  • 变量传递 在组件内定义了相应的变量后，例如组件内部成员变量size，就可以使用this.size方式使用该变量。
1.  Text('Hello World')
    2.  .fontSize(this.size)
  • 链式调用 在配置多个属性时，ArkTS提供了链式调用的方式，通过’.'方式连续配置。
1.  Text('Hello World')
    2.  .fontSize(this.size)
    3.  .width(100)
    4.  .height(100)
  • 表达式传递 属性中还可以传入普通表达式以及三目运算表达式。
1.  Text('Hello World')
    2.  .fontSize(this.size)
    3.  .width(this.count + 100)
    4.  .height(this.count % 2 === 0 ? 100 : 200)
  • 内置枚举类型 除此之外，ArkTS中还提供了内置枚举类型，如Color，FontWeight等，例如设置fontColor改变字体颜色为红色，并私有fontWeight为加粗。
1.  Text('Hello World')
    2.  .fontSize(this.size)
    3.  .width(this.count + 100)
    4.  .height(this.count % 2 === 0 ? 100 : 200)
    5.  .fontColor(Color.Red)
    6.  .fontWeight(FontWeight.Bold)

对于有多种组件需要进行组合时，容器组件则是描述了这些组件应该如何排列的结果。

ArkUI中的布局容器有很多种，在不同的适用场合选择不同的布局容器实现，ArkTS使用容器组件采用花括号语法，内部放置UI描述。

这里我们将介绍最基础的两个布局——列布局和行布局。

对于如下每一项的布局，两个元素为横向排列，选择Row布局

图3Row布局

1.  Row() {
2.  Image($r('app.media.ic_default'))
3.  ...
4.  Text(this.content) 
5.  ...
6.  }
7.  ...

类似下图所示的布局，整体都是从上往下纵向排列，适用的布局方式是Column列布局。

图4Column布局

1.  Column() {
2.  Text($r('app.string.page_title'))
3.  ...

5.  ForEach(this.totalTasks,(item) => {
6.  TodoItem({content:item})
7.  },...)
8.  }

改变组件状态

实际开发中由于交互，页面的内容可能需要产生变化，以每一个ToDoItem为例，其在完成时的状态与未完成时的展示效果是不一样的。

图5不同状态的视图

声明式UI的特点就是UI是随数据更改而自动刷新的，我们这里定义了一个类型为boolean的变量isComplete，其被@State装饰后，框架内建立了数据和视图之间的绑定，其值的改变影响UI的显示。

1.  @State isComplete : boolean = false;

图6@State装饰器的作用

用圆圈和对勾这样两个图片，分别来表示该项是否完成，这部分涉及到内容的切换，需要使用条件渲染if / else语法来进行组件的显示与消失，当判断条件为真时，组件为已完成的状态，反之则为未完成。

1.  if (this.isComplete) {
2.  Image($r('app.media.ic_ok'))
3.  .objectFit(ImageFit.Contain)
4.  .width($r('app.float.checkbox_width'))
5.  .height($r('app.float.checkbox_width'))
6.  .margin($r('app.float.checkbox_margin'))
7.  } else {
8.  Image($r('app.media.ic_default'))
9.  .objectFit(ImageFit.Contain)
10.  .width($r('app.float.checkbox_width'))
11.  .height($r('app.float.checkbox_width'))
12.  .margin($r('app.float.checkbox_margin'))
13.  }

由于两个Image的实现具有大量重复代码，ArkTS提供了@Builder装饰器，来修饰一个函数，快速生成布局内容，从而可以避免重复的UI描述内容。这里使用@Bulider声明了一个labelIcon的函数，参数为url，对应要传给Image的图片路径。

1.  @Builder labelIcon(url) {
2.  Image(url)
3.  .objectFit(ImageFit.Contain)
4.  .width($r('app.float.checkbox_width'))
5.  .height($r('app.float.checkbox_width'))
6.  .margin($r('app.float.checkbox_margin'))
7.  }

使用时只需要使用this关键字访问@Builder装饰的函数名，即可快速创建布局。

1.  if (this.isComplete) {
2.  this.labelIcon($r('app.media.ic_ok'))
3.  } else {
4.  this.labelIcon($r('app.media.ic_default'))
5.  }

为了让待办项带给用户的体验更符合已完成的效果，给内容的字体也增加了相应的样式变化，这里使用了三目运算符来根据状态变化修改其透明度和文字样式，如opacity是控制透明度，decoration是文字是否有划线。通过isComplete的值来控制其变化。

1.  Text(this.content)
2.  ...
3.  .opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT)
4.  .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })

最后，为了实现与用户交互的效果，在组件上添加了onClick点击事件，当用户点击该待办项时，数据isComplete的更改就能够触发UI的更新。

1.  @Component
2.  struct ToDoItem {
3.  @State isComplete : boolean = false;
4.  @Builder labelIcon(icon) {...}
5.  ...
6.  build() {
7.  Row() {
8.  if (this.isComplete) {
9.  this.labelIcon($r('app.media.ic_ok'))
10.  } else {
11.  this.labelIcon($r('app.media.ic_default'))
12.  }
13.  ... 
14.  }
15.  ...
16.  .onClick(() => {
17.  this.isComplete= !this.isComplete;
18.  })
19.  }
20.  }

循环渲染列表数据

刚刚只是完成了一个ToDoItem组件的开发，当我们有多条待办数据需要显示在页面时，就需要使用到ForEach循环渲染语法。

例如这里我们有五条待办数据需要展示在页面上。

1.  total_Tasks:Array<string> = [
2.  '早起晨练',
3.  '准备早餐',
4.  '阅读名著',
5.  '学习ArkTS',
6.  '看剧放松'
7.  ]

ForEach基本使用中，只需要了解要渲染的数据以及要生成的UI内容两个部分，例如这里要渲染的数组为以上的五条待办事项，要渲染的内容是ToDoItem这个自定义组件，也可以是其他内置组件。

图7ForEach基本使用

ToDoItem这个自定义组件中，每一个ToDoItem要显示的文本参数content需要外部传入，参数传递使用花括号的形式，用content接受数组内的内容项item。

最终完成的代码及其效果如下。

1.  @Entry
2.  @Component
3.  struct ToDoList {
4.  ...
5.  build() {
6.  Row() {
7.  Column() {
8.  Text(...)
9.  ...
10.  ForEach(this.totalTasks,(item) => {
11.  TodoItem({content:item})
12.  },...)
13.  }
14.  .width('100%')
15.  }
16.  .height('100%')
17.  }
18.  }

图8ToDoList页面

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

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

相关文章

Simulink简介

Simulink简介

Simulink 是一个模块图环境&#xff0c;用于多域仿真以及基于模型的设计。它支持系统级设计、仿真、自动代码生成以及嵌入式系统的连续测试和验证。Simulink 提供图形编辑器、可自定义的模块库以及求解器&#xff0c;能够进行动态系统建模和仿真。Simulink 与 MATLAB 相集成&am…
阅读更多...
EChars

EChars

1.引入 Apache ECharts <!DOCTYPE html> <html><head><meta charset"utf-8" /><!-- 引入刚刚下载的 ECharts 文件 --><script src"echarts.js"></script></head> </html> 2. <!-- 为 ECharts 准…
阅读更多...
浅谈电动汽车充电站箱变电气安全物联监测系统设计与应用

浅谈电动汽车充电站箱变电气安全物联监测系统设计与应用

摘 要:基于物联网技术架构提出了一种适用于电动汽车充电站箱变的电气安全物联监测系统设计方案。该系统由电气安全智能感知设备、通信网关、电气安全物联网监测平台等构成&#xff0c;可支持充电站箱变充电桩出线回路电流、电缆 温度、剩余电流、故障电弧、短路电流等数据采集监…
阅读更多...
zabbix其他配置

zabbix其他配置

自动发现 zabbix server 主动的去发现所有的客户端&#xff0c;然后将客户端的信息登记在服务端上。 缺点是如果定义的网段中的主机数量多&#xff0c;zabbix server 登记耗时较久&#xff0c;且压力会较大。 systemctl disable --now firewalld setenforce 0 hostnamectl se…
阅读更多...
C++I/O流——(4)格式化输入/输出(第一节)

C++I/O流——(4)格式化输入/输出(第一节)

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 含泪播种的人一定能含笑收获&#xff…
阅读更多...
搜维尔科技：SenseGlove Nova 2力反馈技术手套，虚拟培训的沉浸感达到新高度！

搜维尔科技：SenseGlove Nova 2力反馈技术手套，虚拟培训的沉浸感达到新高度！

SenseGlove Nova 2-虚拟培训的沉浸感达到新高度&#xff01; 通过集成主动接触反馈&#xff0c;Nova 2 使用户能够在手掌中感知虚拟现实物体的感觉。虚拟训练、研究和多人互动现在感觉比以往更加自然。这项创新增强了与整个手掌接触的任何虚拟物体的真实感。使用第一款也是唯一…
阅读更多...
HarmonyOS之sqlite数据库的使用

HarmonyOS之sqlite数据库的使用

从API Version 9开始&#xff0c;鸿蒙开发中sqlite使用新接口ohos.data.relationalStore 但是 relationalStore在 getRdbStore操作时&#xff0c;在预览模式运行或者远程模拟器运行都会报错&#xff0c;导致无法使用。查了一圈说只有在真机上可以正常使用&#xff0c;因此这里…
阅读更多...
redis原理（四）数据安全之数据持久化

redis原理（四）数据安全之数据持久化

一、将数据持久化至硬盘 1、介绍&#xff1a;Redis是一个基于内存的数据库&#xff0c;它的数据是存放在内存中&#xff0c;内存有个问题就是关闭服务或者断电会丢失。Redis的数据也支持写到硬盘中&#xff0c;这个过程就叫做持久化。 2、Redis持久化选项&#xff1a;Redis提…
阅读更多...
Pycharm无法刷新远程解释器的框架: Can‘t get remote credentials for deployment server

Pycharm无法刷新远程解释器的框架: Can‘t get remote credentials for deployment server

在Pycharm上部署项目到远程服务器&#xff0c;有时候需要启动SSH会话&#xff0c;启动的时候发现没反应&#xff0c;且事件日志显示&#xff1a;无法刷新远程解释器的框架: Can’t get remote credentials for deployment server 观察pycharm界面最下边&#xff0c;发现“无默…
阅读更多...
Typora概述

Typora概述

Typora概述 1 下载Typora2 Typra大纲视图3 标题4 引用5 列表6 代码7 图片 各位小伙伴想要博客相关资料的话关注公众号&#xff1a;chuanyeTry即可领取相关资料&#xff01; 作为程序员平时编写笔记和开发文档时一般都使用Markdown格式&#xff0c;为了让你能成为更加专业的程序…
阅读更多...
DApp：去中心化的革命与挑战

DApp：去中心化的革命与挑战

DApp&#xff08;去中心化应用&#xff09;是一种基于区块链技术的应用程序&#xff0c;与传统的中心化应用程序不同&#xff0c;DApp具有去中心化、透明、不可篡改等特性。本文将介绍DApp的前世今生&#xff0c;以及它的优势和未来发展。 DApp的前世可以追溯到区块链技术的出现…
阅读更多...
【华为 ICT HCIA eNSP 习题汇总】——题目集1

【华为 ICT HCIA eNSP 习题汇总】——题目集1

1、&#xff08;多选&#xff09;根据下面所示的命令输出&#xff0c;下列描述中正确的是&#xff1f; A、GigabitEthernet0/0/1 允许VLAN1通过 B、GigabitEthernet0/0/1 不允许VLAN1通过 C、如果要把 GigabitEthernet0/0/1 变为 Access 端口&#xff0c;首先 需要使用命令“un…
阅读更多...
Linux系统——yum仓库及NFS共享

Linux系统——yum仓库及NFS共享

目录 一、yum仓库 1.yum简介 2.yum实现过程 3.如何实现安装服务 4.yum配置文件及命令 4.1yum配置文件 4.1.1主配置文件 4.1.2仓库设置文件 4.1.3日志文件 4.2yum命令详解 4.2.1查询 4.2.2yum安装升级 4.2.3软件卸载 4.2.4操作安装历史记录 5.搭建本地yum仓库 5…
阅读更多...
vue2使用qiankun微前端（跟着步骤走可实现）

vue2使用qiankun微前端（跟着步骤走可实现）

需求&#xff1a;做一个vue2的微前端&#xff0c;以vue2为主应用&#xff0c;其他技术栈为子应用&#xff0c;比如vue3&#xff0c;本文章只是做vue2一套的微前端应用实现&#xff0c;之后解决的一些问题。vue3子应用可以看我另一篇vue3vitets实现qiankun微前端子应用-CSDN博客…
阅读更多...
WebKit工程组织与结构随笔

WebKit工程组织与结构随笔

1.WebKit结构 1.1 三个模块 概括地说&#xff0c;WebKit由主要由三个模块组成&#xff1a;JavaScriptCore、WebCore 和 WebKit。WebKit作为了整个项目的名称。 1). WebCore&#xff0c; 2). WebKit&#xff0c; 3). JavaScriptCore。 WebCore&#xff1a;排版引擎核心&…
阅读更多...
leetcode-344. 反转字符串、9. 回文数

leetcode-344. 反转字符串、9. 回文数

题目1&#xff1a; 解题方法 直接用reverse()即可 代码&#xff1a; class Solution(object):def reverseString(self, s):""":type s: List[str]:rtype: None Do not return anything, modify s in-place instead."""return s.reverse()如果不…
阅读更多...
STC8H8K蓝牙智能巡线小车——3.按键开关状态获取

STC8H8K蓝牙智能巡线小车——3.按键开关状态获取

电路分析 引脚为P37开关未按下时&#xff0c;P37是高电平开关按下时&#xff0c;GND导通&#xff0c;P37是低电平 编程思路 Driver目录中添加KEY.h文件&#xff0c;应包含引脚定义、开关GPIO实例化函数、开关状态获取函数以及当按下和未按下时执行不同的函数&#xff08;函数…
阅读更多...
用Python“自动连发消息”

用Python“自动连发消息”

自动连发消息&#xff0c;基本上C和Python的思路都是不停的模拟“击键”操作&#xff0c;还有一种VB的脚本写法&#xff0c;反成每种语言都能写&#xff0c;更厉害的可以用java做出个GUI界面&#xff0c;先上代码。 一 代码 import pyautogui # 鼠标 import p…
阅读更多...
掌握Spring缓存-全面指南与最佳实践

掌握Spring缓存-全面指南与最佳实践

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;咱们今天来聊聊缓存&#xff0c;在Java和Spring里&#xff0c;缓存可是个大角色。咱们在网上购物&#xff0c;每次查看商品详情时&#xff0c;如果服务器都要去数据库里翻箱倒柜&#xff0c;那速度得慢成什么样&…
阅读更多...
线性回归理论+实战

线性回归理论+实战

线性回归 什么是线性回归 3.1. 线性回归 — 动手学深度学习 2.0.0 documentation (d2l.ai) 模型 损失函数 模型拟合&#xff08;fit&#xff09;数据之前&#xff0c;我们需要确定一个拟合程度的度量。 损失函数&#xff08;loss function&#xff09;能够量化目标的实际值…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023