鸿蒙OS应用开发之最简单的程序

鸿蒙OS应用开发之最简单的程序

前面介绍怎么样安装鸿蒙应用开发的环境,然后试着运行起来,并安装运行的虚拟机,以及对应9.0版本的API和SDK等软件。这样就具备了基本的开发基础,就可以进入创建应用程序开发了。

在我们起飞之前,先要来理解鸿蒙APP的基本组成,也就是这个APP主要长得怎么样,要对它比较了解。这是学习任何系统应用开发的第一步,统称为Hello World程序。在这里不会例外,我们还是需要通过一个Hello World程序来了解整个开发环境,以及程序的基本组成,然后才能深入去学习开发语言的语法,以及相关的API功能,再在这个基础之上进行客户的需求开发,比如定制一个企业打卡软件,又或者开发一个即时通讯软件等等。

从前面我们学会创建一个Hello World程序,如果还不会,就要回过头去看前面的文章。因为这里会继续前面的内容,看到创建程序如下:

从开发界面来看,左边就是工程文件的树形显示,如果刚从这里来看,是比较复杂的,无论是谁也不能一下子就搞懂它们,所以先放下来,知道它是构成工程文件即可,主要来看右边窗口的文件,在这里显示的是Index.ets文件,这个文件才是我们主要关心的,它是后面修改界面和改变显示内容的关键代码。

如果第一眼看这些代码,也是搞不懂的它的,因为它是一种特殊的方式,与以往的开发语言不一样。因此要先从这个简单的代码开始,我们把每一行代码都来搞懂它。

我们来把它们隐藏起来,就会看到只剩下三行代码:

这三行代码,让我们这种新手看起来,就容易多了。

先看第一行代码@Entry,这行代码是比较奇怪,与一般的C代码或c++代码有差别,主要它是一个@字符开头,这是表示什么意思呢?如果你学习过Python语言,或许就有印象,它是表示一个装饰器的开头,这个装饰器的名称叫做Entry。@Entry表示该自定义组件为入口组件,这里包含了应用程序的入口,也就是应用程序运行之后最先运行的代码就在这里。

接着我们来看第二行代码@Component,从前面分析可知,它也是一个装饰器,这个装饰器的名称叫做Component。@Component表示自定义组件,表示后面这些内容是自己定义的组件,也就是我们自己写的代码,叫做自定义。

装饰器: 用于装饰类、结构、方法以及变量,并赋予其特殊的含义。

在这里定义了一个组件的名称叫做Index,它是一个struct结构体。也就是第三行代码的意义。所以到这里,我们就明白了鸿蒙应用就是一个自定义的组件。struct:自定义组件基于struct实现,struct + 自定义组件名 + {...}的组合构成自定义组件,不能有继承关系。对于struct的实例化,可以省略new。

我们来把这个自定义组件进行展开:

这个结构体里是使用一个大括号包含,里面定义了一个消息变量和一个系统组件build()。先来看消息变量这行:

@State message: string = 'Hello World'

前面使用一个@State来定义,从前面来看 ,只要@开头的就是装饰器,它是一个状态更新的装饰器。@State表示组件中的状态变量,状态变量变化会触发UI刷新。其作用就是当字符串变量string 改变时,就通知界面进行刷新,这样才能实时地查看到字串内容的变化。在这里,把这个变量赋值为'Hello World'字符串。

接着下来,就是build()方法,它是一个系统定义组件的方法,这个方法必须要实现,相当于自定义组件的虚函数,如果不实现这个方法,就会编译失败。它是来自@Component组件里,具体可以查看它的代码和文档。所有声明在build()函数的语言,我们统称为UI描述语言。@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力,需要实现build方法描述UI,一个struct只能被一个@Component装饰。

在build()方法里其实只有一行代码,它就是Row()方法。这个也是系统组件的内容,它在这里进行嵌套使用了。Row()表示进行一列显示。在这一列里再进行一行显示,所以定义了Column()方法。

接着下来我们会发现在Row()组件后面带有一对括号,但在括号后面又带有一个属性,如下图:

可以看到有一个句号后面带着height('100%'),这种表示方法叫做链式属性设置,意思就是说Row(){}是返回一个对象,而这个对象就可以设置属性。

属性方法:组件可以通过链式调用配置多项属性,如fontSize()、width()、height()、backgroundColor()等。

在这里height('100%')的意思就是表示这一行占整个屏幕所有高度,就是100%。如果只想占用一半,就可以设置为50%。

设置为100%的显示如下:

如果设置为50%,显示如下:

可以看到整个字符串往上移动了,因为它只占用上面的50%的空间。

到这里,我们就分析这一行显示的代码完成了,接着下来我们来看一下这一行里显示的代码,如下:

      Column() {

        Text(this.message)

          .fontSize(50)

          .fontWeight(FontWeight.Bold)

      }

      .width('100%')

可以仔细地看一下代码,发现Column()组件,也是系统组件,它是表示一列的意思,如果一行里要显示多列,就可以创建多个Column()组件。这个组件也是可以设置它的宽度,通过链式方法.width('100%')来设置。

在一列里使用了Text()组件来输出一串字符串,字符串this.message就是前面定义的字符串Hello World,这里使用this对象来限定了本对象的声明变量。Text()组件后面使用链式表示来设置字体显示大小为50,字体精细为粗体。

到这里,我们就把这个最简单的应用程序分析完成了。现在来总结一下,整个应用程序的结构如下:

装饰器: 用于装饰类、结构、方法以及变量,并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器,@Component表示自定义组件,@Entry表示该自定义组件为入口组件,@State表示组件中的状态变量,状态变量变化会触发UI刷新。

UI描述:以声明式的方式来描述UI的结构,例如build()方法中的代码块。

自定义组件:可复用的UI单元,可组合其他组件,如上述被@Component装饰的struct Hello。

系统组件:ArkUI框架中默认内置的基础和容器组件,可直接被开发者调用,比如示例中的Column、Text、Divider。

属性方法:组件可以通过链式调用配置多项属性,如fontSize()、width()、height()、backgroundColor()等。

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

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

相关文章

Navicat 技术指引 | 适用于 GaussDB 分布式的日志查询与配置设置

Navicat Premium(16.3.3 Windows 版或以上)正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能,还提供强大的高阶功能(如模型、结…

c/c++中一些不常用但有用的知识

1.变长数组 bool fun(int cnt) {unsigned char data[cnt];return true; } 在 C 语言中,变长数组(Variable Length Arrays,VLA)是 C99 标准引入的特性,允许使用变量来定义数组的长度。因此,在 C 版本的代码…

遥测终端机RTU:实现远程监测和控制的重要工具

遥测终端机RTU对设备进行远程监测和控制,支持采集和传输数据,以实现对工业过程、公用事业、水文和环境的监测和管理。 遥测终端机RTU工作原理 计讯物联遥测终端机RTU通过网口、串口进行传感器/设备等现场数据采集,将其转换为数字信号&#xf…

数据库字段名和sql关键字冲突报错解决方法

1、修改实体类字段映射。注解里加反引号 2、sql字段上加反引号 3、问题解决

Flink 使用场景

Apache Flink 功能强大,支持开发和运行多种不同种类的应用程序。它的主要特性包括:批流一体化、精密的状态管理、事件时间支持以及精确一次的状态一致性保障等。Flink 不仅可以运行在包括 YARN、 Mesos、K8s 在内的多种资源管理框架上,还支持…

中东电商指南分享!盘点中东四大跨境电商平台

提到跨境电商新蓝海,就不得不想起土豪聚集地 ——中东,中东地区拥有庞大的人口、高人均GDP、强大的消费能力以及广泛普及的互联网,但外出购物却相对不便,正是这一特点为中东跨境电商市场创造了巨大的优势。随着中东地区电商的崛起…

无人机自主巡检是什么?如何实现自动巡检?

近年来,随着科技不断演进,无人机自主巡检技术在多个领域取得显著进展。那么,无人机自主巡检到底是什么?它又是如何实现自动化的呢? 一、无人机自主巡检的定义 无人机自主巡检技术是利用无人机对目标对象或区域进行巡检…

IntelliJ idea卡顿解决,我遇到的比较管用的方案

Setttings> Build, Execution,Deployment>Debugger> Data Views> Java 取消 Enable "toString()" object view; Speed up debugging in IntelliJ Yesterday, I observed painfully slow debugging in IntelliJ. Every step over or step in took almost…

信息解码(Message Decoding, ACM/ICPC World Finals 1991, UVa 213)

考虑下面的01串序列: 0, 00, 01, 10, 000, 001, 010, 011, 100, 101, 110, 0000, 0001, …, 1101, 1110, 00000, … 首先是长度为1的串,然后是长度为2的串,依此类推。如果看成二进制,相同长度的后 一个串等于前一个串加1。注意上述…

【latex笔记】双栏格式下插入单栏、双栏格式图片

双栏格式下插入单栏、双栏格式图片 1.缘起multicols2.双栏格式 插入单栏图片3.双栏格式 插入双栏图片 1.缘起multicols 插入双栏格式图片问题被困扰了有很长一段时间,查看网络资源也一直没找到解决方法,今天查看Latex官方文档,才发现因为mul…

AGI 时代,小红书邀您一起复盘年度 100 件值得学习的好案例

2023 年,由 ChatGPT 引爆新一轮人工智能热潮,开启了由大模型驱动的 AGI 时代。随着 AIGC 的快速崛起,传统的研发模式是否会被 AI 颠覆也成为了巨大的未知数。面对不同规模团队与不同业务场景,企业想要找到可靠、可行、可落地的转型…

CLion手把手教你创建Windows项目

作为一个Jetbrains迷的我,下载了Jetbrains全家桶,我就想用CLion 编写 Windows 项目 前提:必须安装 Visual Studio 2022 New Project 选择 C Executable,取好项目名, 点击 Create 在 CMakeList.txt 中添加以下内容&…

期末速成数据库极简版【创建】(1)

目录 前言 【1】T-SQL语句创建数据库 【2】T-SQL语句删除数据库 【3】T-SQL语句创建表 完整性约束 数据类型 例子 【4】T-SQL语句修改表 【5】T-SQL语句删除表 关于数据库,在我们学习Linux网络编程后面会详细学习到,为了应付期末考试&#xff0…

解决删除文件后 WSL2 磁盘空间不释放的问题

查看 Linux distributions 打开 PowerShell 并执行如下命令: wsl -l -v 搜索并找到 ext4.vhdx 文件 我的 ext4.vhdx 文件如下: C:\Users\xxx\AppData\Local\Packages\CanonicalGroupLimited.Ubuntu22.04LTS_79rhkp1fndgsc\LocalState\ext4.vhdx 由于…

从初级测试工程师到高级测试岗进阶指南,一文带你不迷路...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 说到软件测试工程…

大一python题库及答案,大一python期末必考题

大家好,小编来为大家解答以下问题,大一python题库及答案,大一python期末必考题,今天让我们一起来看看吧! 本篇文章给大家谈谈大一python题库及答案,以及大一python期末必考题,希望对各位有所帮助…

NTP反射放大攻击

文章目录 什么是NTPNTP反射放大攻击解决方案搭建NTP服务器部署服务器端windows NTP命令行本机测试 部署客户端ntpdatechrony 实验Python利用脚本 什么是NTP 基于UDP协议的NTP(网络时间协议):使网络中各个计算机时间同步的一种协议 用途&…

光伏电站全貌

光伏电站 简介 每一篇文章开篇我都会写一个内容简介,一来梳理自己的写作思路,二来方便读者整体了解文章写作意图和脉络。本篇是新能源方面的开篇之作,我选取了介绍光伏电站基础知识,首先我们要了解光伏电站基础分类,然…

OpenCL学习笔记(四)手动编译开发库(ubuntu+gcc+rk3588)

前言 笔者本次使用的是RK3588的开发板,内部烧写的是ubuntu20.04,gcc版本是9 本文档简单记录下编译的过程,有需要的小伙伴可以参考下 一、安装所需软件 1.安装git,教程比较多,不再重复 2.安装cmake,教程…

IntelliJ IDEA使用Eval Reset

文章目录 IntelliJ IDEA使用Eval Reset说明具体操作 IntelliJ IDEA使用Eval Reset 说明 操作系统:windows10 版本:2020.1 IntelliJ IDEA安装可查看:安装教程 具体操作 添加,输入网址 https://plugins.zhile.io然后搜索“IDE E…