鸿蒙ArkTS言语入门

ArkTS言语入门

在学习ArkTS言语之前，咱们首先须要一个能够编译并运转该言语的工具DevEco Studio，该工具详细的装置及性能流程可依照这位博主所指点的启动操作，这里就不再赘述。

这张图将一个繁难页面的组成部分详细的指了进去，包括装璜器以及各种各样的组件等，它的最终展现成果如下：

对“Click me”启动点击，将会出现如下成果：

接上去，咱们将开局正式学习ArkTS言语。

1.运行页面导致

上图即为一个基本页面的规划，我将以上图为例，逐个解说其中的内容：首先，我先解说上图中每一个节点所代表的含意：

以上便是一个基本页面组成的例子。

2.代码示例

上图便是前文中的页面导致的代码示例，接上去，我将逐个剖析各段代码的作用：

如上图所示，这类以“@”扫尾的叫做装璜器，装璜器的作用是赋予被装璜内容某一种才干，例如“@Entry”,这个装璜器的作用是将被它装璜的组件作为页面的入口，在页面被加载时该组件将会被渲染展现。而“@Component”则是用于装璜结构体struct，示意该结构体是一个UI组件。

接着，如图所示为build方法，页面内一切内容将在build方法内写入，每个组件都必定成功build方法，用于定义组件的申明式UI形容。

接上去便是页面的组成部分了，由图示，第一个Column容器在“{}”中蕴含了第二层的Test，Column，Row容器，而第二层的容器则又在“{}”中蕴含了第三层的内容，以此类推......,假设须要更改，参与或删减内容，可以间接在对应的层级中启动操作。

接上去，我将引见其中几个较为罕用的组件及其用法：

“Test”----Testy用于文本的展现，当咱们在Test中写入内容,如：

Test('test').fontsize(50)

此时，将会出现出如下页面：

这里的fontsize为Test组件的属性，用于设置文本内容的大小。在Test组件中，还可以间接援用寄存在resouces目录下的资源文件，例如咱们在resouces目录下创立string文件。

“string”：[{"name":"EntryAbility_lable","value":"lable"}]

其中string代表数据类型，name代表该文件其中内容的称号，value则代表指定内容中值。接着，可以经过" $r('') "在Test组件中援用该数据，例如：

Test($r('app.string.EntryAbility_lable')).fontsize(50).fontColor('#ff2233')

在其中又参与了fontColor属性，用于扭转文本色彩，当然，也可以经过相反方法，援用寄存在resouces目录下Color文件，成功对文本色彩的扭转，形如：

Test($r('app.string.EntryAbility_lable')).fontsize(50).fontColor($r('app.Color.lable_color'))

“Button”----Button是一个按钮组件，用于页面与用户的交互。在上方的基础上，咱们参与Button组件。

Test($r('app.string.EntryAbility_lable')).fontsize(50).fontColor($r('app.Color.lable_color'))Button('button').width(100)

在Button后的括号中可以写入显示在按钮上的文本，并经过width属性设置其大小，接着，咱们可以经过形如。

Button('button'，{type：ButtonType.Normal}).width(100)

来设置按钮的形态，编译器会智能揭示如下类型以供选用：

包括圆形，矩形，圆角矩形等。

“image”----image组件是用于图片展现，使得咱们的页面不单单由文本组成，赞美页面的同时可以展现出更多的内容，该组件允许本地图片和网络图片的渲染展现。在上方的基础上，咱们参与Image组件

Test($r('app.string.EntryAbility_lable')).fontsize(50).fontColor($r('app.Color.lable_color'))Button('button').width(100)Image($r('app.media.loading')).width(100).height(100)

Image组件有且只要一个参数，就是图片的数据源，代码示例是援用resouces目录下已下载的文件启动展现，接着经过width以及height属性对图片大小启动调整，使得页面变得协调。

此博客由金陵科技学院-放开原子开源社-张子航编写。