二、ArkUI界面设计1（组件-样式-基础）

240922

在build里面写代码，预览器看效果。

build 函数中只能有一个根节点，并且这个根节点必须是一个容器组件（里面可以放其他组件，例如Column）。

1. ArkUI基本语法

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

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

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

2. 常用系统组件

2.1 系统组件

组件	描述
Text	显示文本
Image	显示图片
Column	列，内容垂直排列
Row	行，内容水平排列
Button	按钮

例：小说简介

示例代码

@Entry
@Component
struct Index {
  build() {
    // 先布局，考虑垂直水平等
    // 再放内容，考虑所需组件
    // 最后美化样式，考虑属性方法
    Column(){
      Text('小说简介')
      Row(){
        Text('都市')
        Text('生活')
        Text('情感')
        Text('男频')
      }
    }
  }
}

2.2 通用属性

属性	描述
width	宽度
height	高度
backgroundColor	背景颜色

将2.1所列例子添加属性方法

示例代码

@Entry
@Component
struct Index {
  build() {
    // 先布局，考虑垂直水平等
    // 再放内容，考虑所需组件
    // 最后美化样式，考虑属性方法
    Column(){
      Text('小说简介')
        //宽度100%后，内容居左对齐
        .width('100%')
        .height(40)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
      Row(){
        Text('都市')
          .width(50)
          .height(30)
          .backgroundColor(Color.Orange)
        Text('生活')
          .width(50)
          .height(30)
          .backgroundColor(Color.Pink)
        Text('情感')
          .width(50)
          .height(30)
          .backgroundColor(Color.Yellow)
        Text('男频')
          .width(50)
          .height(30)
          .backgroundColor(Color.Gray)
      }
        .width('100%')
    }
  }
}

2.3 尺寸单位

2.3.1 px

px：物理像素，也叫设备像素，设备实际拥有的像素点。（出厂设置、分辨率单位）

问题：如果使用px作为宽度和高度的单位，但又希望在不同显示能力的设备上保证视觉效果一致，就需要针对每个设备单独进行编码和设置尺寸，非常麻烦。

那么，是否存在一种单位，能够自动根据设备的显示能力来转换大小，从而保证在多设备上视觉效果的一致性呢？

2.3.2 vp

vp：viewport pixel 视口像素

• 会根据不同设备的显示能力，自动进行转换成对应px物理像素，保证不同设备视觉一致。
• 当数值不带单位时，默认单位vp。（如上述代码中width(50)，其中50单位为vp）
• 基于目前预览器和常规手机的显示能力，vp和px的对应关系大约为1:3，1vp≈3px（超清屏手机？）

1080px - 360vp

对比效果示例代码

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('vp测试')
        .width(100)
        .height(100)
        .backgroundColor(Color.Gray)
        .fontWeight(FontWeight.Bold)
      Text('px测试')
        .width('100px')
        .height('100px')
        .backgroundColor(Color.Pink)
        .fontWeight(FontWeight.Bold)
    }
  }
}