鸿蒙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()等。

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

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

相关文章

家电制造数字孪生5G智能工厂可视化系统,加速家电制造产业数字化转型

5G数字孪生、三维可视化与工业互联网的融合加速中国新型工业化进程,助推我国从制造大国迈进制造强国。家电行业是中国最具国际竞争力的产业之一,在企业数字化转型中,要求企业从生产设备到数字化系统,一系列的数字化、智能化改革已…

鲁大师电动车智能化测评报告第二十四期:RideyFUN!上线,九号猎户座858分刷新电自榜单

鲁大师第二十四期智能化电动车测评排行榜数据来源于鲁大师智慧实验室,测评的车型均为市面上主流品牌的主流车型。截止目前,鲁大师智能化电动车测评的车型高达140余台,且还在不断增加和丰富中。 1、 测评依据 鲁大师电动车智能化测评体系包含车…

imutils库介绍及安装学习

目录 本机环境 安装 函数及属性 列举imutils库信息 属性和函数介绍及使用 属性 常用函数 方法使用 图像平移 图像缩放 图像旋转 骨架提取 通道转换 OPenCV版本的检测 综合测试 介绍 imutils 是一个用于图像处理和计算机视觉任务的 Python 工具包。它提供了一系…

ElaticSearch海量数据搜索技术(待补充)

ElaticSearch海量数据搜索 ES的安装ES中基本概念正向索引与倒排索引倒排索引搜索流程正向和倒排的对比 ES的安装 ①首先安装elasticsearch-7.12.1-windows-x86_64,解压到一个无中文无空格目录下即可 ②然后安装中文的分词器 在 elasticsearch-7.12.1-windows-x86_64…

log4j2日志框架使用

依赖 <dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-core</artifactId><version>2.11.1</version> </dependency> 配置文件样列 <?xml version"1.0" encoding"UTF-8"…

C语言第十六集(前)

1.关于那个整形存储入char的 是先取好补码,再截断 例: 2.%u是以十进制的形式打印无符号整数 3.注意(背):存储的char类型变量的补码为10000000的直接解析为-128 4.signed char 类型的变量取值范围是-128~127 5.unsigned char 类型的变量取值范围是0~255 6.有符号类型的变量…

【C/PTA —— 15.结构体2(课外实践)】

C/PTA —— 15.结构体2&#xff08;课外实践&#xff09; 7-1 一帮一7-2 考试座位号7-3 新键表输出7-4 可怕的素质7-5 找出同龄者7-6 排队7-7 军训 7-1 一帮一 #include<stdio.h> #include<string.h>struct student {int a;char name[20]; };struct student1 {int …

[⑧ADRV902x]: Digital Pre-Distortion (DPD)学习笔记

前言 DPD 数字预失真技术&#xff0c;是一种用于抑制功率放大器非线性失真的方法。 它通过在信号输入功率放大器&#xff08;PA&#xff09;之前插入一个预失真模块&#xff0c;对输入信号进行适当的调制&#xff0c;以抵消功率放大器引起的非线性失真&#xff0c;使功率放大器…

JAVA常用队列

阻塞队列介绍 Queue接口 public interface Queue<E> extends Collection<E> { //添加一个元素&#xff0c;添加成功返回true, 如果队列满了&#xff0c;就会抛出异常 boolean add(E e); //添加一个元素&#xff0c;添加成功返回true, 如果队列满了&#xff0c;返回…

主动而非被动:确保网络安全运营弹性的途径

金融部门处理威胁的经验对网络安全领域的任何人都有启发——没有什么可以替代提前摆脱潜在的风险和问题。 从狂野西部的银行劫匪到勒索软件即服务 (RaaS)&#xff0c;全球金融生态系统面临的威胁多年来发生了巨大变化。技术进步带动了金融业的快速发展&#xff0c;从现金交易到…

相控阵天线(十四):常规大阵列天线分布(椭圆阵列、三角阵列、矩形拼接阵列、栅格拼接阵列)

目录 简介椭圆阵列三角阵列子阵拼接的矩形阵列子阵拼接的圆形阵列圆形子阵拼接阵列子阵栅格拼接阵列 简介 前面的博客已经介绍过常见的平面阵有一些基本类型&#xff0c;本篇博客介绍一些实际工程中可能出现的阵列&#xff0c;包括椭圆阵列、子阵通过矩形拼接形成的矩形大阵列…

QT Windos平台下打包应用程序

一、windeployqt.exe windeployqt&#xff1a;是 Qt 框架自带的一个工具&#xff0c;用于将一个 Qt 应用程序在 Windows 操作系统下进行打包。它可以通过扫描应用程序的依赖项获取所需的 Qt 库文件、插件和翻译文件&#xff0c;以及复制应用程序可执行文件和所需的依赖项到指定…