【OpenHarmony 北向应用开发】ArkTS语言入门(构建应用页面)

ArkTS语言入门

在学习ArkTS语言之前,我们首先需要一个能够编译并运行该语言的工具 DevEco Studio。

了解ArkTS

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

体验ArkTS

首先,我们来看这张图:点击此链接了解做鸿蒙应用开发到底学习些啥? (qq.com)

这张图将一个简单页面的组成部分详细的指了出来,包括装饰器以及各种各样的组件等,它的最终展示效果如下:

添加图片注释,不超过 140 字(可选)

对“Click me”进行点击,将会呈现如下效果:

添加图片注释,不超过 140 字(可选)

学习ArkTS

接下来,我们将开始正式学习ArkTS语言。

1.应用页面构成点击此链接了解做鸿蒙应用开发到底学习些啥? (qq.com)

上图即为一个基本页面的布局,我将以上图为例,逐一讲解其中的内容:

首先,我先讲解上图中每一个节点所代表的含义:

“APP”----这个即是软件本身,所有的操作都将在它的基础上完成。

“Column”----column是一个主轴为纵向的容器,在它上面的内容将以纵向排列。

“Row”----与column相反,Row是一个主轴为横向的容器,在它上面的内容将以横向排列。

“Test”----Test是文本容器,可以在其中输入文字并将其展示在页面上。

“Image”----Image是图片容器,可以向其中传入图片并将其展示在页面上。

“Slider”----Slider是一个滑动条组件,用于控制一些可调节的页面内容。

“Button”----Button则是一个按钮,用于实现页面与用户的交互功能。

接下来,我将由这个树状图,展示如何实现页面的布局:

1.此时为未布局的状态

2.将第一层的column容器填充到页面当中

3.接着,将第二层的Test,Column按顺序纵向排列在第一层Column容器中点击此链接了解做鸿蒙应用开发到底学习些啥? (qq.com)

4.再将第三层的Row,Slider按顺序纵向排列在第二层的column容器中

5.再将第四层的Image和Test按顺序横向排列在第三层的Row容器中

6.最后类似上面的步骤,将最后的Row以及其中的两个Button按钮排列在第二层的Column容器中

以上便是一个基本页面组成的例子。点击此链接了解做鸿蒙应用开发到底学习些啥? (qq.com)

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

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

相关文章

nginx_rtmp_module 之 ngx_rtmp_mp4_module 的mp4源码分析

一:整体代码函数预览 static ngx_int_t ngx_rtmp_mp4_postconfiguration(ngx_conf_t *cf) {ngx_rtmp_play_main_conf_t *pmcf;ngx_rtmp_play_fmt_t **pfmt, *fmt;pmcf ngx_rtmp_conf_get_module_main_conf(cf, ngx_rtmp_play_module);pfmt ngx_ar…

ACM32如何保护算法、协议不被破解或者修改

ACM32具有以下几种功能,可以保护算法、协议不被破解或者修改。 1.存储保护  RDP读保护  WRP写保护  PCROP 专有代码读保护  MPU存储区域权限控制  Secure User Memory存储区域加密 2.密码学算法引擎  AES  HASH  随机数生成  …

RHEL8_Linux使用podman管理容器

本章主要介绍使用 podman 管理容器 了解什么是容器,容器和镜像的关系安装和配置podman拉取和删除镜像给镜像打标签导出和导入镜像创建和删除镜像 1.了解容器及和镜像的关系 对于初学者来说,不太容易理解什么是容器,这里举一个例子。想象一下…

设计模式——模板方法模式

引言 模板方法模式是一种行为设计模式, 它在超类中定义了一个算法的框架, 允许子类在不修改结构的情况下重写算法的特定步骤。 问题 假如你正在开发一款分析公司文档的数据挖掘程序。 用户需要向程序输入各种格式 (PDF、 DOC 或 CSV&#…

runCatching异常捕获onSuccess/onFailure返回函数,Kotlin

runCatching异常捕获onSuccess/onFailure返回函数,Kotlin fun test(a: Int, b: Int) {runCatching {a / b}.onSuccess {println("onSuccess: $it")return ok(it)}.onFailure {println("onFailure: $it")return fail(it)} }fun ok(o: Any) {prin…

眼镜店验光配镜处方单打印管理系统软件教程

一、前言 1、眼镜店原始的手写处方单逐步被电脑打印单取代 2、使用电脑开单,记录可以保存可以查询,而且同一个人配镜可以对比之前的信息 软件下载或技术支持可以点击最下方官网卡片 如上图,该软件有顾客信息模块,旧镜检查模块…

英伟达盒子 Jetson Xshell连接串口查看日志方法(串口日志、盒子日志)

文章目录 连接串口xshell连接串口信息 连接串口 接盒子上的A2、B2,以及接地线: 另外一头接上电脑(我用的RS485转USB工具): xshell连接 协议选择SERIAL: 设置盒子厂商约定的端口号、波特率、数据位、停止位…

hping3

Hping3 Hping3的介绍: 是一款网络的测试工具,一般用于网络安全员用来进行防火墙的测试等抗压测试。 Hping3的帮助面板: -h –help显示帮助 -v –version显示版本信息 -c –count 限制发包数 -i –interval nterval 指定发包间隔为多少毫秒&#…

SpringBoot Starter机制(自定义Start案例,实际开发场景中的短信模拟,AOP实现日志打印)

前言: 在我们上一篇博客中,实现Freemarke的增删改查,今天分享的是关于SpringBoot Starter机制-- 1.SpringBoot Starter 1.1.什么是SpringBoot Starter SpringBoot中的starter是一种非常重要的机制(自动化配置),能够抛弃以前繁杂…

[elementPlus] teleported 在 ElSubMenu中的用途

如图 一个菜单对应的路由结构如上图 如果做适配窄屏幕 如果在 <ElSubMenu :index"route.path" >中不加入 teleported 就会出现问题 加上就OK了 <ElSubMenu :index"route.path" teleported>

Windows环境下QT应用程序的发布

时间记录&#xff1a;2023/12/17 1.生成版本介绍&#xff0c;debug&#xff1a;调试版本&#xff0c;携带调试信息&#xff0c;占用内存稍大一些&#xff0c;release&#xff1a;发布版本&#xff0c;一般开发完毕选择此套件进行编译生成可执行程序进行发布 2.发布步骤 &#x…

KubeSphere应用【笔记四】自定义镜像

一、概述 在KubeSphere部署Redis负载时&#xff0c;想通过应用商店部署Redis&#xff0c;通过应用商店部署redis时可以指定访问密码&#xff0c;结果应用商店部署Redis时如下图所示&#xff0c;不能进行部署&#xff0c;所以打算自己制作有默认密码的镜像&#xff0c;上传至Ha…