[ArkUI] 记录一次 ArkUI 学习心得 (1) -- 基础概念

1.一个原生鸿蒙应用的源码目录

其中:
  ets是项目的源码目录.
  ets/pages是页面目录, 用于渲染页面.
  resources是资源目录,下面会讲.

2.第一个原生鸿蒙应用

话不多说,直接上代码.

@Entry
@Component
struct Index {
  @State message: string = 'My First Program!';
  @State num: number = 0;
  @State scs: string[] = ["test1","test2"]

  build() {
    Row() {
      Column() {
        Text($r("app.string.test"))
          .fontSize(20)
        ForEach(this.scs,(item:string,index:number) => {
          Text("Text:"+item)
            .fontSize(20)
        })
        Text(this.num.toString())
          .fontSize(50)
          .fontWeight(FontWeight.Bolder)
        Button("H")
          .size({
            width: 80,
            height: 80
          })
          .type(ButtonType.Capsule)
          .fontSize(40)
          .onClick(()=>{
            this.num++;
          })
          .margin(50)
      }.width("100%")
   }.height("100%")
    .backgroundColor("#FFFF00")
  }
}

效果如下

Index 结构体

Index 结构体中有一个成员函数 build().其基本结构如下:

struct Index {
   build() {
      
   }
}

鸿蒙应用从Index.build()处开始执行渲染函数.

一个组件的编写方式

在 ArkUI 中,一个组件的编写方式可以是这样.

  Button("text")  //定义了一个组件,叫做Button
  { //在 {} 内编写此组件下的子组件
  } .type(ButtonType.Capsule) //子组件编写结束了,用一堆函数来设计 Button 本身的样式.

Row 和 Column 组件

在 ArkUI 中, Row 和 Column 组件用来定义整个应用程序的宽和高.
Row 和 Column 通常为整个鸿蒙应用程序的的第一,第二个子组件.

Row 和 Column 也是一个组件,也可以通过 height() 等函数来定义其长宽.
例如:

build() {
  Row() {
    Column() {
    }.height("100%") //占满整个应用程序
  }.height("100%") //占满整个应用程序

一些需要注意的点

  @State 用来声明这是一个可变变量,类似于vue的v-bind.
  <? extends Component>(text:string) 用来创建一个组件,其中的文字为 text.
  .backgroundColor() 只能够使用十六进制码,不允许使用rgb().

3.ForEach 的使用

2 中包含的代码包含 ForEach(). 下面是 OpenHarmony 给出的标准 API.

interface ForEach {(
	arr: Array<any>, 
	itemGenerator: (item: any, index?: number) => void,
  keyGenerator?: (item: any, index?: number) => string
  ): ForEach;
}

我对上述 API 进行了一番简化

ForEach(arr:Array<T>,itemGenerator: (item: T,index: number) => void,keyGenerator: (item: string,index: number)=?>void)

其中:
   arr：必须是数组，允许空数组，空数组场景下不会创建子组件。
   itemGenerator：子组件生成函数，为给定数组项生成一个或多个子组件。
   keyGenerator：匿名参数，用于给定数组项生成唯一且稳定的键值。

如果要使用,可以这么用

ForEach(["test1","test2"],(item:string,index:number) => { 
  Text("Text:"+item)
    .fontSize(20)
})

结果如上述结果图所示 (按钮上面的Text:)

4.resources 文件夹 和 $r() 函数

4.1 resources 文件夹

resources 文件夹包含了各种资源文件,包括 img 图像,字符串常量等.
其中:
   base 文件夹是存放基本资源文件.
   dark 文件夹是存放暗黑模式下的界面设计.
   rawfile 文件夹是存放一些二进制文件(图片等).

4.2 base 文件夹下的 element 文件夹

本节着重讲述 base 文件夹下的 element 文件夹下的 json 文件.
一个 json 文件相当于一个命名空间.app 可引用此命名空间.
一个 json 文件对应的键和值如图所示.

4.3 引用key.

Text($r("app.string.test"))
          .fontSize(20)

上述代码中,$r(text:string)即为命名空间.
其中:
  text的格式为 app.<命名空间>.<其中的key>.
  例如上述的 app.string.test,即引用 string.json 中的 test 键中的值.

resources/base/element/string.json的结构如图所示,其中有个

{
  "name": "test",
  "value": "tests"
}

因此, $r("app.string.test") 的结果为 "tests".