HarmonyOS4.0从零开始的开发教程04 初识ArkTS开发语言(下)

HarmonyOS(二) 初识ArkTS开发语言(下)之TypeScript入门

声明式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组件对应如下整个代办页面。

图1 ToDoList待办列表
点击放大

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

@Component
struct ToDoItem {...}

图2 ToDoItem
点击放大

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

@Entry
@Component
 struct ToDoList
   ...
   build() {
    ...
  } 
}

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

@Entry
@Component
struct ToDoList {
  ...
  build() {
    Column(...) {
      Text(...)
        ...
      ForEach(...{
        TodoItem(...)
      },...)
    }
  ...
  }
}

配置属性与布局

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

  • 常量传递

    例如使用fontSize(50)来配置字体大小。

    Text('Hello World')
      .fontSize(50)
    
  • 变量传递

    在组件内定义了相应的变量后,例如组件内部成员变量size,就可以使用this.size方式使用该变量。

    Text('Hello World')
      .fontSize(this.size)
    
  • 链式调用

    在配置多个属性时,ArkTS提供了链式调用的方式,通过’.'方式连续配置。

    Text('Hello World')
      .fontSize(this.size)
      .width(100)
      .height(100)
    
  • 表达式传递

    属性中还可以传入普通表达式以及三目运算表达式。

    Text('Hello World')
      .fontSize(this.size)
      .width(this.count + 100)
      .height(this.count % 2 === 0 ? 100 : 200)
    
  • 内置枚举类型

    除此之外,ArkTS中还提供了内置枚举类型,如Color,FontWeight等,例如设置fontColor改变字体颜色为红色,并私有fontWeight为加粗。

    Text('Hello World')
      .fontSize(this.size)
      .width(this.count + 100)
      .height(this.count % 2 === 0 ? 100 : 200)
      .fontColor(Color.Red)
      .fontWeight(FontWeight.Bold)
    

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

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

点击放大

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

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

图3 Row布局
点击放大

Row() {
  Image($r('app.media.ic_default'))
    ...
  Text(this.content) 
    ...
}
...

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

图4 Column布局
点击放大

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

   ForEach(this.totalTasks,(item) => {
     TodoItem({content:item})
   },...)
 }

改变组件状态

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

图5 不同状态的视图
点击放大

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

@State isComplete : boolean = false;

图6 @State装饰器的作用
点击放大

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

if (this.isComplete) {
  Image($r('app.media.ic_ok'))
    .objectFit(ImageFit.Contain)
    .width($r('app.float.checkbox_width'))
    .height($r('app.float.checkbox_width'))
    .margin($r('app.float.checkbox_margin'))
} else {
  Image($r('app.media.ic_default'))
    .objectFit(ImageFit.Contain)
    .width($r('app.float.checkbox_width'))
    .height($r('app.float.checkbox_width'))
    .margin($r('app.float.checkbox_margin'))
}

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

@Builder labelIcon(url) {
  Image(url)
    .objectFit(ImageFit.Contain)
    .width($r('app.float.checkbox_width'))
    .height($r('app.float.checkbox_width'))
    .margin($r('app.float.checkbox_margin'))
}

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

if (this.isComplete) {
  this.labelIcon($r('app.media.ic_ok'))
} else {
  this.labelIcon($r('app.media.ic_default'))
}

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

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

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

@Component
struct ToDoItem {
  @State isComplete : boolean = false;
  @Builder labelIcon(icon) {...}
  ...
  build() {
    Row() {
      if (this.isComplete) {
        this.labelIcon($r('app.media.ic_ok'))
      } else {
        this.labelIcon($r('app.media.ic_default'))
      }
      ... 
    }
    ...
    .onClick(() => {
      this.isComplete= !this.isComplete;
     })
  }
}

循环渲染列表数据

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

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

total_Tasks:Array<string> = [
  '早起晨练',
  '准备早餐',
  '阅读名著',
  '学习ArkTS',
  '看剧放松'
]

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

图7 ForEach基本使用
点击放大

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

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

@Entry
@Component
struct ToDoList {
   ...
   build() {
     Row() {
       Column() {
         Text(...)
           ...
         ForEach(this.totalTasks,(item) => {
           TodoItem({content:item})
         },...)
       }
       .width('100%')
     }
     .height('100%')
   }
 }

图8 ToDoList页面
点击放大

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

虚拟机配置网络(这里以centos为例)

①、点击“编辑”里面的“虚拟网络编辑器”,取消勾选DHCP服务将IP地址分配给虚拟机。 2.点击nat设置&#xff0c;看看对应的子网ip和网关地址还有子网掩码&#xff0c;然后在安装虚拟机生成的vmware8适配器配置中配置和刚刚nat配置中一样的配置 3&#xff0c;然后和第二部一样…

AIGC之Image2Video(一)| Animate Anyone:从静态图像生成动态视频,可将任意图像角色动画化

近日&#xff0c;阿里发布了Animate Anyone&#xff0c;只需一张人物照片&#xff0c;结合骨骼动画&#xff0c;就能生成人体动画视频。 项目地址&#xff1a;https://humanaigc.github.io/animate-anyone/ 论文地址&#xff1a;https://arxiv.org/pdf/2311.17117.pdf Github…

力扣116. 填充每个节点的下一个右侧节点指针(详细讲解root根节点的理解)

题目&#xff1a; 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右…

酷开科技以创新为动力用大数据提升品牌认知

在21世纪的今天&#xff0c;我们生活在一个被互联网深深改变的世界。互联网不仅改变了我们的生活方式&#xff0c;也正在改变我们的思维方式和工作方式。而互联网作为一种新的发展趋势&#xff0c;更是为我们提供了无数的机会和无限可能性&#xff0c;从电子商务时代到社交网络…

Spring的配置文件,如何配置端口号,,properties,yml获取配置项等方法,外观模式及其优缺点,日志代表的信息

目录 一、回顾 二.如何配置端口号 配置文件&#xff0c;最重要的目的:解决硬编码问题-代码写死 1.常见配置项 yml获取配置项 多次获取配置项&#xff08;yml会对我们的参数情况&#xff0c;进行的一定类型转换比如数字10&#xff0c;转换成“10”&#xff09; null:使用k…

交易历史记录20231205 记录

昨日回顾&#xff1a; select top 10000 * from dbo.CODEINFO A left join dbo.全部&#xff21;股20231205010101 B ON A.CODE B.代码 left join dbo.全部&#xff21;股20231205CONF D on A.CODED.代码left join dbo.全部&#xff21;股20231205 G on A.CODEG.代码 left…

常见面试题之死锁

定义 死锁就是两个或两个以上的线程在执行过程中&#xff0c;由于竞争资源或者互相通信导致彼此占用对方的锁资源而造成的一种阻塞现象&#xff0c;在没有外界作用下都在等待对方释放锁资源&#xff0c;导致程序无法进行下去。 上代码 public class t9 {public static void m…

MongoDB知识总结

这里写自定义目录标题 MongoDB基本介绍MongoDB基本操作数据库相关集合相关增删改查 MongoDB基本介绍 简单介绍 MongoDB是一个基于分布式文件存储的数据库。由C语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB是一个介于关系数据库和非关系数据库之间的产…

基于 Stereo R-CNN 的自动驾驶 3D 目标检测

论文地址&#xff1a;https://openaccess.thecvf.com/content_CVPR_2019/papers/Li_Stereo_R-CNN_Based_3D_Object_Detection_for_Autonomous_Driving_CVPR_2019_paper.pdf 论文代码&#xff1a;https://github.com/HKUST-Aerial-Robotics/Stereo-RCNN 论文背景 大多数 3D 物…

Failed to connect to github.com port 443 after 21055 ms: Timed out

目前自己使用了梯*子还是会报这样的错误&#xff0c;连接不到的github。 查了一下原因&#xff1a; 是因为这个请求没有走代理。 解决方案&#xff1a; 设置 -> 网络和Internet -> 代理 -> 编辑 记住这个IP和端口 使用以下命令&#xff1a; git config --global h…

TCP实现一对一聊天

一&#xff0c;创建类 二&#xff0c;类 1.ChatSocketServer类 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; import java.util.Sca…

Redis哨兵(sentinel)

文章目录 简介搭建框架具体步骤主要文件参数开始配置 案例分析原有的master挂了 哨兵运行流程和选举原理主观下线客观下线(Objectively Down)选举出领导者哨兵(哨兵中选出兵王) 选新的master使用建议 简介 将某一个从库转换为新主库&#xff0c;继续对外服务将某一个从库转换为…

Apache Flink(七):Apache Flink快速入门 - DataStream BATCH模式

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你大数据的个人空间-豹哥教你大数据个人主页-哔哩哔哩视频 下面使用Java代码使用DataStream…

HarmonyOS应用开发者高级认证考试答案

一、判断题 云函数打包完成后&#xff0c;需要到AppGallery Connect创建对应函数的触发器才可以在端侧中调用&#xff08;错&#xff09;在column和Row容器组件中&#xff0c;aligntems用于设置子组件在主轴方向上的对齐格式&#xff0c;justifycontent用于设置子组件在交叉轴…

Java异步编程之利器:Guava异步编程实践

第1章&#xff1a;引言 - 为什么要用Guava进行异步编程&#xff1f; 大家好&#xff0c;我是小黑&#xff01;今天咱们要聊的是Guava在异步编程中的应用。首先&#xff0c;让我们搞清楚为什么要用Guava来处理异步任务。在Java的世界里&#xff0c;异步编程是个老话题了&#x…

Android--Jetpack--Databinding详解

不经一番寒彻骨&#xff0c;怎得梅花扑鼻香 一&#xff0c;定义 DataBinding, 又名数据绑定&#xff0c;是Android开发中非常重要的基础技术&#xff0c;它可以将UI组件和数据模型连接起来&#xff0c;使得在数据模型发生变化时&#xff0c;UI组件自动更新。是 MVVM 模式在 An…

Day52力扣打卡

打卡记录 Collapsing Strings&#xff08;Trie树&#xff09; 链接 #include <iostream> #include <algorithm> using namespace std; const int N 2e6 10; int son[N][26], idx, cnt1[N], cnt2[N]; int main() {auto insert [&](string& str, int* c…

计算机基础知识66

Auth的补充 #概念&#xff1a;是django 的一个app&#xff0c;关于用户的登录&#xff0c;退出&#xff0c;注册... # 配置文件中配置&#xff1a;表会被迁移 INSTALLED_APPS [django.contrib.auth,] # auth有哪些表---权限控制&#xff1a; Permission&#xff1a;auth_permi…

【PyTorch】权重衰减

文章目录 1. 理论介绍2. 实例解析2.1. 实例描述2.2. 代码实现 1. 理论介绍 通过对模型过拟合的思考&#xff0c;人们希望能通过某种工具调整模型复杂度&#xff0c;使其达到一个合适的平衡位置。权重衰减&#xff08;又称 L 2 L_2 L2​正则化&#xff09;通过为损失函数添加惩…

HTTPS 的通信加解密过程,证书为什么更安全?

目录 一、什么是https 二、HTTPS 的加解密过程 三、HTTPS 为什么更安全&#xff1f; 一、什么是https HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;是一种通过加密和身份验证保护数据传输安全的通信协议。它是在常用的HTTP协议基础上添加了 SSL/TLS 加…