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

关注

原创 2025-01-14 10:23:19 572 阅读 AI 写同款· GEO 优化 ›

前端转鸿蒙必看篇：ArkUI的布局组件内容和组件内容区不一定匹配，比如设置了固定的width和height，此时组件内容的大小就是设置的width和height减去padding和border值，但文本内容则是通过文本布局引擎测算后得到的大小，可能出现文本真实大小小于设置的组件内容区大小。相对布局是在二维空间中的布局方式，不需要遵循线性布局的规则，布局方式更为自由。组件内容区（黄色方块）：组件内容区大小为组件区域大小减去组件的 border 值，组件内容区大小会作为组件内容（或者子组件）进行大小测算时的布局测算限制。阅读详情

程序员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()

常用基础组件：

组件	作用描述
Text	显示文本
Image	显示图片
Button	按钮

常用的基础样式属性：

示例：

@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)
      }

效果如下所示：