程序员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)
}
效果如下所示：
1.3 ArkUI中的尺寸单位
1. px ：
物理像素，也叫设备像素，设备实际拥有的像素点（出场设置、分辨率单位）
问题：如果用 px 作为宽高单位，又想保证不同显示能力的设备，视觉效果一样大，
就需要针对每个设备单独编码，设置尺寸，非常麻烦。
能不能有个单位，帮我们自动根据显示能力，来进行转换大小，保证多设备视觉效果一致呢？
2. vp ：
virtual pixel 虚拟像素 【推荐使用】
● 会根据不同设备的显示能力，自动进行转换成对应 px 物理像素，保证不同设备视觉一致
● 当数值不带单位时，默认单位 vp
● 基于目前预览器和常规手机的显示能力，vp 和 px 的对应关系，大约为 3 倍，1vp ≈ 3px （超清屏手机）
好了，夜已深，本篇就到这里啦，关注我，跟着我轻松拿下Harmony OS开发！
