【HarmonyOS】ArkTS语言介绍与组件方式运用

        从今天开始，博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”，对于刚接触这项技术的小伙伴在学习鸿蒙开发之前，有必要先了解一下鸿蒙，从你的角度来讲，你认为什么是鸿蒙呢？它出现的意义又是什么？鸿蒙仅仅是一个手机操作系统吗？它的出现能够和Android和IOS三分天下吗？它未来的潜力能否制霸整个手机市场呢？

抱着这样的疑问和对鸿蒙开发的好奇，让我们开始今天对ArkTS语言的了解以及对组件的掌握吧！

目录

初识ArkTS语言

ArkUI基础组件

Image(图片显示组件)

Text(文本显示组件)

TextInput(文本输入框)

Button(按钮组件)

Slider(滑动条组件)

Column、Row(布局容器)

ForEach(循环控制)

List(列表容器)

ArkTS自定义组件

初识ArkTS语言

ArkTS是HarmonyOS优选的主力应用开发语言，它在 TypeScript(简称TS) 的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。要了解什么是ArkTS，我们要先了解一下ArkTS、TypeScript 和 JavaScript 之间的关系，如下：

学习ArkTS之前还是推荐先了解并掌握一下 JS 和 TS ，这两门语言的掌握再回头看ArkTS的话可谓是上手很快了。ArkTS兼容TypeScript语言，拓展了声明式UI、状态管理、并发任务等能力。在学习ArkTS语言之前，建议开发者具备ts语言的开发能力，当前ArkTS在ts的基础上主要扩展了如下能力：

基本语法：

ArkTS定义了声明式 UI 描述、自定义组件和动态扩展UI元素的能力，再配ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。

状态管理:

ArkTS提供了多维度的状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。

渲染控制：

ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

未来，ArkTS会结合应用开发/运行的需求持续演进，逐步提供并行和并发能力增强、系统类型增强、分布式开发范式等更多特性。

在ArkTS的布局结构方面，开发者需要在页面上声明对应的元素，其布局的结构通常是分层级的，代表了用户界面中的整体架构，一个常见的页面结构如下：

其中Page表示页面的根节点，Column/Row等元素为系统组件。针对不同的页面结构，ArkUI提供了不同的布局组件来帮助开发者实现对应布局的效果，例如Row用于实现线性布局等，我会给大家详细讲解对应的布局。

ArkUI基础组件

接下来将对ArkUI常用的基础组件进行一个简单的演示与应用，掌握ArkUI的基本使用。

Image(图片显示组件)

声明Image组件并设置图片源方式如下：

Image(src: string|PixelMap|Resource)

1）string格式，通常用来加载网络图片，需要申请网络访问权限：ohos.permission.INTERNET

Image('https://xxx.png')

打开 module.json5 文件夹下，配置如下 requestPermissions 选项，可以看到图片出现。

2)PixelMap格式，可以加载像素图，常用在图片编辑中

Image(pixelMapObject)

3）Resource格式，加载本地图片，推荐使用

Image($r('app.media.mate'60.png)

Image($rawfile('mate60.png'))

Text(文本显示组件)

Text(content?: string|Resource)

1）string格式，直接填写文本内容

Text('文本内容')

2）Resource格式，读取本地资源文件

Text($r('app.string.width_label'))

这里我们设置了一个动态的文本显示：

TextInput(文本输入框)

TextInput( {placeholder?: ResourceStr, text?: ResourceStr} )

1）placeHolder：输入框无输入时的提示文本

TextInput({placeholder: '请输入账号或手机号'})

2）text：输入框当前的文本内容

TextInput({text: '文本内容'})

比如我们用输入框动态的改变一个图片的大小操作如下：

下面是输入框的各种类型描述：

名称描述
Normal基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Password密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。
Email邮箱地址输入模式。支持数字，字母，下划线，以及@字符。
Number纯数字输入模式。
PhoneNumber电话号码输入模式。支持输入数字、+、-、*、#、长度不限。

Button(按钮组件)

Button(label?: ResourceStr)

1）文字型按钮

Button('点我')

2）自定义按钮，在Button内嵌套其它组件

Button(){

        Image($r('app.media.search')).width(20).margin(10)

}

比如我们用按钮动态的改变一个图片的大小操作如下：

下面是按钮的各种类型描述：

名称描述
Capsule胶囊型按钮（圆角默认为高度的一半）。
Circle圆形按钮。
Normal普通按钮（默认不带圆角）。

Slider(滑动条组件)

滑动条的组件的功能实现很简单，只需要在Slider里面设置其功能，外部设置其样式即可：

Column、Row(布局容器)

Column容器与Row容器其对应的对齐方式使用的参数如下表格所示：

属性方法名说明参数
justifyContent设置子元素在主轴方向的对齐格式FlexAlign枚举
alignItems设置子元素在交叉轴方向的对齐格式Row容器使用VerticalAlign枚举
Column容器使用HorizontalAlign枚举

Column容器中使用FlexAlign的主轴对齐方式函数及其特点如下所示：

Row容器中使用FlexAlign的主轴对齐方式函数及其特点如下所示： 

两者在交叉轴上的对齐方式如下所示：

Column容器：纵向布局，先从上往下，再从左往右。

Row容器：横向布局，先从左往右，再从上往下。

以下给出使用Column和Row容器的例子：

@Entry
@Componentstruct Index {// 设置状态变量@State ImageWidth: number = 150build() {Column() {Row(){Image($r('app.media.icon')).width(this.ImageWidth).interpolation(ImageInterpolation.High)}.width('100%').height(400).justifyContent(FlexAlign.Center)Row(){Text($r('app.string.width_label')).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#008c8c')TextInput({text: this.ImageWidth.toString()}).backgroundColor('#fff').width(200).type(InputType.Number) // 只能输入数字类型.onChange(value=>{if (!value) {this.ImageWidth = 0}else {this.ImageWidth = parseInt(value)}})}.width('100%').padding({left: 10, right: 10}).justifyContent(FlexAlign.SpaceBetween)Divider().width('91%')Row(){Button('缩小').width(80).fontSize(20).onClick(()=>{if(this.ImageWidth >= 10){this.ImageWidth -= 10}})Button('放大').width(80).fontSize(20).onClick(() => {if (this.ImageWidth <= 300) {this.ImageWidth += 10}})}.width('100%').justifyContent(FlexAlign.SpaceAround).margin({top: 30, bottom: 30})Slider({min: 100,max: 300,value: this.ImageWidth,step: 10, // 步长}).width('90%').blockColor('#36D').trackThickness(5) // 滑动条的粗细.showTips(true) // 显示气泡百分比.onChange(value => {this.ImageWidth = value})}.width('100%').height('100%')}
}

呈现的效果如下所示：

ForEach(循环控制)

ForEach循环遍历数组，根据数组内容渲染页面组件，以下是其基本格式：

ForEach(arr: Array, // 要遍历的数据数组(item: any, index?: number) => {// 页面组件生成函数}keyGenerator?: (item: any, index?: number): string => {// 键生成函数，为数组每一项生产一个唯一标识，组件是否重新渲染的判断标准}
)

以下是通过ForEach生成页面的组件的基本案例：

class Item {name: stringimage: ResourceStrprice: numberdiscount: numberconstructor(name: string, image: ResourceStr, price: number, discount = 0) {this.name = namethis.image = imagethis.price = pricethis.discount = discount}
}@Entry
@Componentstruct Index {// 商品数据private items: Array<Item> = [new Item('华为', $r('app.media.icon'), 6999, 500),new Item('小米', $r('app.media.icon'), 7999),new Item('苹果', $r('app.media.icon'), 9999),new Item('三星', $r('app.media.icon'), 3999),new Item('oppo', $r('app.media.icon'), 1999),]build(){Column({space: 4}){Row(){Text('商品列表').fontSize(30).fontWeight(FontWeight.Bold)}.width('100%').margin({bottom: 20})ForEach(this.items,(item: Item) => {Row({space: 10}){Image(item.image).width(100)Column({space: 4}){if (item.discount) {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)Text('原价：￥ '+ item.price).fontColor('#ccc').fontSize(14).decoration({type: TextDecorationType.LineThrough})Text('折扣价：￥ '+ (item.price - item.discount)).fontColor('#F36').fontSize(18)Text('补贴：￥ '+ item.discount).fontColor('#F36').fontSize(18)}else {Text(item.name).fontSize(20).fontWeight(FontWeight.Bold)Text('￥ '+ item.price).fontColor('#F36').fontSize(18)}}.margin({left: 10}).height('100%').alignItems(HorizontalAlign.Start)}.width('100%').height(120).borderRadius(20).backgroundColor('#EFEFEF').padding(20).margin({bottom: 10})})}.width('100%').height('100%').padding(20)}
}

呈现的结果如下所示：

List(列表容器)

List是一种复杂的容器，当页面内容数量过多超出屏幕后，其列表项ListItem会自动提供滚动功能，当然列表项既可以纵向排列也可以横向排列，其基本格式代码如下：

List({space: 10}){ForEach([1, 2, 3, 4], item => {ListItem(){// 列表项内容，只能包含一个根组件Text('ListItem')}})
}
.width('100%')
.listDirection(Axis.Vertical) // 列表方向，默认纵向（垂直）

在ForEarch外面我们嵌套一层List容器，在ForEach里面我们嵌套ListItem，来实现页面的滚动：

最终呈现的效果如下：

ArkTS自定义组件

ArtTS提供了一些自定义组件及函数的方式，让繁杂的代码抽离出来，便于代码的可维护性和可阅读性，增强了代码的健壮性，以下是ArkTS进行自定义组件等相关的方法：

自定义组件：自定义组件很简单，可以在一个ets中进行书写，将一部分代码处理出来新设置一个 struct 构造函数即可，也可以将代码单独抽离出来形成一个新的文件，如下将上面案例的头部组件抽离出来形成一个新的组件Header，然后再在原本书写头部代码的位置引用Header组件即可：

自定义函数：自定义函数可以将烦长的代码单独抽离出一个函数当中，然后在原位置调用我们设置的函数即可，自定义函数可以定义在全局或组件内，如下：

如果想设置组件内自定义函数，则需要设置与build()函数平级然后去掉function，然后引用函数的位置需要通过this指向即可：

@Styles装饰器： 用来设置组件公共样式，可以定义在全局或者组件内，和自定义函数的方式一致，如下：

@Extend装饰器：仅可定义在全局，用来设置组件的特有属性，使用方式与上面一致：

// 继承模式，只能写在全局
@Extend(Text) function priceText() {.fontSize(18).fontColor('#F36')
}

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

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

相关文章

设计模式：抽象工厂模式（讲故事易懂）

设计模式：抽象工厂模式（讲故事易懂）

抽象工厂模式 定义&#xff1a;将有关联关系的系列产品放到一个工厂里&#xff0c;通过该工厂生产一系列产品。 设计模式有三大分类&#xff1a;创建型模式、结构型模式、行为型模式 抽象工厂模式属于创建型模式 上篇 工厂方法模式 提到工厂方法模式中每个工厂只生产一种特定…
阅读更多...
NFS的基本使用

NFS的基本使用

#江南的江 #每日鸡汤&#xff1a;岁月匆匆&#xff0c;时光荏苒&#xff0c;感悟人生路漫漫&#xff0c;不忘初心方得始终。 #初心和目标&#xff1a;和从前的自己博弈。 NFS(存储共享服务) 本文要点摘要&#xff1a; 下面将讨论什么是NFS&#xff0c;如何配置NFS&#xff0c;…
阅读更多...
全新ui自动化测试框架教学——Cypress

全新ui自动化测试框架教学——Cypress

前言 在现阶段自动化测试领域大规模普及的是selenium及appium等常规自动化测试工具&#xff0c;但在其中会有遇到很多影响因素导致测试结果不理想和不准确的情况发生。在经过Darren洋对自动化测试工具调研后&#xff0c;发现了Cypress这一款针对端到端的自动化测试工具&#xf…
阅读更多...
52.网游逆向分析与插件开发-游戏反调试功能的实现-检测调试器

52.网游逆向分析与插件开发-游戏反调试功能的实现-检测调试器

码云地址&#xff08;master分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;be9f058bfaaa4b015f2659db842e07ee37e58996 代码下载地址&#xff0c;在 SRO_EX 目录下&#xff0c;文件名为&#xff1a;SRO_Ex检测调试器.z…
阅读更多...
认识计算机网络——计算机网络的概念

认识计算机网络——计算机网络的概念

计算机网络是指将多台计算机通过通信介质连接起来&#xff0c;以便共享资源、交换信息和进行协作的技术体系。在现代社会中&#xff0c;计算机网络已经成为了各个领域的重要基础设施&#xff0c;改变了人们的生活方式和工作方式。本文将介绍计算机网络的基本概念、组成要素和发…
阅读更多...
vue3框架笔记

vue3框架笔记

Vue Vue 是一个渐进式的前端开发框架&#xff0c;很容易上手。Vue 目前的版本是 3.x&#xff0c;但是公司中也有很多使用的是 Vue2。Vue3 的 API 可以向下兼容 2&#xff0c;Vue3 中新增了很多新的写法。我们课程主要以 Vue3 为主 官网 我们学习 Vue 需要转变思想&#xff0…
阅读更多...
Springboot整合JSP-修订版本(Springboot3.1.6+IDEA2022版本)

Springboot整合JSP-修订版本(Springboot3.1.6+IDEA2022版本)

1、问题概述&#xff1f; Springboot对Thymeleaf支持的要更好一些&#xff0c;Springboot内嵌的Tomcat默认是没有JSP引擎&#xff0c;不支持直接使用JSP模板引擎。这个时候我们需要自己配置使用。 2、Springboot整合使用JSP过程 现在很多的IDEA版本即使创建的项目类型是WAR工…
阅读更多...
kivy BoxLayout说明

kivy BoxLayout说明

BoxLayout的特点 自动排列&#xff1a;BoxLayout会根据其orientation属性&#xff08;垂直或水平&#xff09;自动排列其子部件。这简化了布局的过程&#xff0c;尤其是当你有许多需要按顺序排列的部件时。可定制的间距和对齐&#xff1a;通过spacing属性&#xff0c;你可以控…
阅读更多...
QT应用篇 三、QML自定义显示SpinBox的加减按键图片及显示值效果

QT应用篇 三、QML自定义显示SpinBox的加减按键图片及显示值效果

QT应用篇 一、QT上位机串口编程 二、QML用Image组件实现Progress Bar 的效果 三、QML自定义显示SpinBox的加减按键图片及显示值效果 文章目录 QT应用篇前言一、qml需求二、使用组件1.SpinBox组件2.SpinBox中QML的使用 总结 前言 记录自己学习QML的一些小技巧方便日后查找 QT的…
阅读更多...
Python魔法方法之__getattr__和getattribute

Python魔法方法之__getattr__和getattribute

在Python中有这两个魔法方法容易让人混淆&#xff1a;__getattr__和getattribute。通常我们会定义__getattr__而从来不会定义getattribute&#xff0c;下面我们来看看这两个的区别。 __getattr__魔法方法 class MyClass:def __init__(self, x):self.x xdef __getattr__(self, …
阅读更多...
【起草】【第十二章】定制ChatGPT数字亲人

【起草】【第十二章】定制ChatGPT数字亲人

身为普普通通的我们&#xff0c;不知道亲人们在哪一天就要离开这个世界 &#xff1f; 作为普普通通的程序员&#xff0c;我们可以为我们的亲人做点什么 &#xff1f; 让他们以数字资产形式留在人世间 ? 对话&#xff5c;6岁女孩病逝捐器官&#xff0c;妈妈&#xff1a;她去…
阅读更多...
【ROS2】MOMO的鱼香ROS2（一）ROS2入门篇——从Ubuntu操作系统开启

【ROS2】MOMO的鱼香ROS2（一）ROS2入门篇——从Ubuntu操作系统开启

从Ubuntu操作系统开启 引言1 术语汇总2 Ubuntu &#xff08;操作系统&#xff09;2.1 Ubuntu权限管理2.2 Ubuntu安装软件2.2.1 使用apt命令安装2.2.2 dpkg安装deb包2.2.3 make install源代码安装 2.3 Ubuntu之常用指令2.3.1 ls命令&#xff08;查看文件&#xff09;2.3.2 cd 命…
阅读更多...
2024任务驱动Java程序设计讲课提纲

2024任务驱动Java程序设计讲课提纲

文章目录 为何采用任务驱动&#xff1f;任务驱动Java程序设计课程概述项目一&#xff1a;踏上Java开发之旅任务1&#xff1a;安装配置JDK并开发第一个Java程序1、安装JDK2、配置JDK环境变量3、开发第一个Java程序 任务2&#xff1a;搭建Java集成开发环境IntelliJ IDEA1、安装In…
阅读更多...
07｜输出解析：用OutputParser生成鲜花推荐列表

07｜输出解析：用OutputParser生成鲜花推荐列表

07&#xff5c;输出解析&#xff1a;用OutputParser生成鲜花推荐列表 模型 I/O Pipeline 下面先来看看 LangChain 中的输出解析器究竟是什么&#xff0c;有哪些种类。 LangChain 中的输出解析器 语言模型输出的是文本&#xff0c;这是给人类阅读的。但很多时候&#xff0c;你…
阅读更多...
livox avia平台搭建

livox avia平台搭建

硬件平台搭建 硬件平台的搭建除了livox雷达外还需要以下物料 焊接12V稳压模块接口 livox雷达需要12V的稳定电压供电，因此需要在电池与雷达之间加入8-35V转12V的稳压模块 组装 将各组建组装起来即可。 220V交流电供电 电池供电
阅读更多...
谷歌Linux内核自动测试平台架构介绍-用自动测试测试难以测试的问题

谷歌Linux内核自动测试平台架构介绍-用自动测试测试难以测试的问题

1 摘要 内核和硬件等低级系统已被证明极难进行有效测试&#xff0c;因此&#xff0c;许多内核测试都是以手动为主方式进行的。现有的大多数测试框架都是为测试与底层平台隔离的高级软件而设计的&#xff0c;而底层平台被假定是稳定可靠的。测试底层平台本身需要一套全新的假设…
阅读更多...
研究：同样的C++模板在多个cpp里出现，编译器是否要重复生成？

研究：同样的C++模板在多个cpp里出现，编译器是否要重复生成？

2023年就要过去&#xff0c;马上要跨如2024年。祝大家在新的一年&#xff0c;有个好收成。 一直以来不是很确定&#xff1a; 同样的的模板&#xff0c;在各个cpp分别出现&#xff0c;编译器要实现几份&#xff1f; 研究一下。 用命令行的编译方法&#xff0c;参考&#xff1a…
阅读更多...
使用react+vite开发项目时候，部署上线后刷新页面无法访问解决办法

使用react+vite开发项目时候，部署上线后刷新页面无法访问解决办法

说一下我这边的环境和使用的路由模式&#xff1a;vitereactBrowserRouter路由模式&#xff0c;所以如果你和我一样的话&#xff0c;可以试试我的这种解决办法&#xff0c;我是将项目打包后直接丢到服务器上的目录里面&#xff0c;然后配置nginx直接访问根目录。 我的nginx配置…
阅读更多...
Java 类型转换

Java 类型转换

自动 1 短的变长的 2 表达式的自动类型转换 多种数据类型参与运算&#xff0c;其结果以大的数据类型为准byte, short, char 三种类型数据在和其他类型数据运算时&#xff0c;都会转换为int类型再运算&#xff08;byte byte也会是int int&#xff09; 强制 前面我们学习了自…
阅读更多...
Python中matplotlib使用3

Python中matplotlib使用3

在matplotlib中&#xff0c;可以将数据用离散的点来表示&#xff0c;这种表示方式叫做散点图。 1 基本的散点图 可以使用matplotlib.pyplot库中的scatter()方法绘制散点图&#xff0c;代码如图1所示。 图1 绘制基本散点图的代码 从图1中可以看出&#xff0c;scatter()方法的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023