Harmony NEXT开发ArkUI框架速成二基础语法

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、嵌入式、鸿蒙、人工智能等,专注于程序员成长那点儿事,希望在成长的路上有你相伴！君志所向,一往无前！

1.ArkUI基础语法

1.1 ArkTS页面组成

在创建的时候，可以创建Page也可以直接创建ArkTS,Page其实也是一个ArkTS，只是自带了一些装饰器和对应的结构。

1.直接创建Page

下面这个就是右键-page-Empty Page即可

内容如下所示：

@Entry //入口
@Component //组件
struct MyPage1 {
  //自定义变量 @State监听变量状态
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {//相对布局
      Text(this.message)//文本组件
        .id('MyPage1HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}

2.创建ArkTS文件

直接创建ArkTS文件，就是一个空白的ets文件，需要自己写代码，代码如下所示：

@Entry //入口
@Component //自定义组件
struct MyPage2{ //结构体
  //自定义变量 状态监听 改变的话组件也会更改
  @State num:number=0;
  build() {
    Column(){// 行、列 布局
      //按钮
      Button("点击次数="+this.num).onClick(()=>{//按钮点击事件
        this.num++;//自增1
      }).fontSize(25).width("80%").padding(10)//样式
    }.width("100%")
  }
}

效果如下所示：

你会了吗，不会就赶紧关注、私聊我！

1.2 ArkUI基础组件

方舟开发框架（简称：ArkUI），是一套构建HarmonyOS应用 界面 的框架。

构建页面的最小单位就是 "组件"。

组件名(参数) {
  内容
}
 .属性1()
 .属性2()
 .属性N()
    

常用基础组件：

常用的基础样式属性：

示例：

@Entry //入口
@Component //自定义组件
struct MyPage2{ //结构体
  //自定义变量 状态监听 改变的话组件也会更改
  @State num:number=0;
  build() {
    Column(){// 行、列 布局
      //按钮
      Button("点击次数="+this.num).onClick(()=>{//按钮点击事件
        this.num++;//自增1
      }).fontSize(25).margin(10).width("80%").padding(10)//样式

      Text("程序员Feri").padding(10).margin(10).textAlign(TextAlign.Start)
      Row(){
        Text("Harmony OS").backgroundColor(Color.Gray).padding(5).margin(5)
        Text("Open Harmony").backgroundColor(Color.Pink).padding(5).margin(5)
        Text("搞钱专业户").backgroundColor(Color.Orange).padding(5).margin(5)
      }
    }.width("100%")
  }
}

效果：

当然，我们也可以为组件的字体进行各种的样式设置，常用的字体样式设置如下所示：

比如可以对刚刚的内容进行字体相关的属性设置，代码如下所示：

 Text("程序员Feri").fontColor(Color.Red).fontSize(30).
      textAlign(TextAlign.Start).fontWeight(FontWeight.Bolder)
        .padding(10).margin(10).width("100%")
      Row(){
        Text("Harmony OS").backgroundColor(Color.Gray).padding(5).margin(5)
        Text("Open Harmony").backgroundColor(Color.Pink).padding(5).margin(5)
        Text("搞钱专业户").fontColor(Color.White).backgroundColor(Color.Orange).padding(5).margin(5)
      }

效果如下所示：

1.3 ArkUI中的尺寸单位

1. px ：

物理像素，也叫设备像素，设备实际拥有的像素点（出场设置、分辨率单位） 问题：如果用 px 作为宽高单位，又想保证不同显示能力的设备，视觉效果一样大， 就需要针对每个设备单独编码，设置尺寸，非常麻烦。 能不能有个单位，帮我们自动根据显示能力，来进行转换大小，保证多设备视觉效果一致呢？

2. vp ：

virtual pixel 虚拟像素 【推荐使用】

● 会根据不同设备的显示能力，自动进行转换成对应 px 物理像素，保证不同设备视觉一致

● 当数值不带单位时，默认单位 vp

● 基于目前预览器和常规手机的显示能力，vp 和 px 的对应关系，大约为 3 倍，1vp ≈ 3px （超清屏手机）

好了，夜已深，本篇就到这里啦，关注我，跟着我轻松拿下Harmony OS开发！