【OpenHarmony】OpenHarmony 开发基础 ③ ( @State 注解修饰变量 | Row 布局 | OpenHarmony 的 Length 属性值 | Column 布局 )

韩曙亮

发布于 2024-06-02 08:13:01

5900

一、OpenHarmony 开发基础

系统默认生成的 index.ets 代码如下 :

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

下面继续分析上述代码的内容 , 进行基础代码分析 ;

1、@State 注解修饰变量

@State message: string = 'Hello World'; 代码分析 :

message: string 是一个变量 ;

@State 注解用于管理页面级变量的状态 , 并且与自定义组件的渲染紧密相关 ;

为该变量设置 @State 注解 , 当 @State 装饰的变量数据发生变化时 , 会触发所在组件的 build 方法重新渲染 UI 组件 , 从而实现状态与UI的实时绑定更新 ;

2、Row 水平线性布局

在 OpenHarmony 中 , Row 布局组件就是一个水平的线性布局 , 该布局中的组件元素在水平方向上排列 , 常用属性如下 :

space 属性 : 子组件的间距可以通过 space 属性设置 , 默认间距为 0 ;
alignItems 属性 : 设置子组件垂直方向的对齐方式 ;
- VerticalAlign.Center : 垂直方向居中对齐 , 默认值 ;
- VerticalAlign.Top: 垂直方向顶部对齐 ;
- VerticalAlign.Bottom: 垂直方向底部对齐 ;
justifyContent 属性 : 设置子组件水平方向的对齐方式 ;
- FlexAlign.Start : 水平方向左对齐 ;
- FlexAlign.Center : 水平方向居中对齐 ;
- FlexAlign.End : 水平方向右对齐 ;

在下面的 build(){} 中添加 Row 组件 , 然后在 Row 组件中再添加了 Column 组件 ;

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('50%')
    }
    .height('100%')
  }

Column 组件垂直方向默认在 Row 中居中对齐 , 水平方向默认在 Row 中左对齐 ;

Row 组件代码示例 :

@Entry
@Component
struct Example {
  build() {
    Row({ space: 10 }) { // 设置子组件间距为10

      Text('Text1')
        .fontSize(20)
        .backgroundColor(Color.Green)

      Text('Text2')
        .fontSize(20)
        .backgroundColor(Color.Yellow)

      Text('Text3')
        .fontSize(20)
        .backgroundColor(Color.Gray)

    }
    .width('80%') // 设置 Row 的宽度
    .height('30') // 设置 Row 的高度
    .backgroundColor(Color.Pink)
  }
}

预览器显示效果 : Row 组件宽度占整体宽度的 80% , 高度是 30 vp 视窗像素 ;

3、OpenHarmony 的 Length 属性值

在上面涉及到很多设置长度属性的地方 , 如 :

space: 10 设置 Row 布局中的子组件之间的水平间距 ;
fontSize(20) 设置 Text 组件的字体大小 ;
width('80%') 设置组件宽度 ;
height('30') 设置组件高度 ;

OpenHarmony 的 Length 属性值用于设置组件的尺寸相关属性 , 如 : 宽度 / 高度 / 内边距 / 外边距等 , 这个属性值可以是 :

具体的数值 : 具体数值有两种计量单位 , 分别是视窗像素 vp , 物理像素 fp , 分别类似于 Android 中的屏幕像素 dp 和实际像素 px ;
- 视窗像素 : 是一种虚拟的像素单位 , 该像素值并不直接对应屏幕上的实际物理点 , 而是根据设备的像素密度和屏幕尺寸进行调整 ; 一般开发时都使用视窗像素 ;
- 物理像素 : 就是实际上屏幕中的像素点 , 开发时基本不使用 , 无法进行多机型适配 ;
相对于父容器的百分比 : 注意这里是相对于父容器的百分比 , 不是屏幕的百分比 ; 在组件布局时 , 基本都使用百分比进行布局 ;

4、Column 垂直线性布局

OpenHarmony 的 Column 组件是垂直线性布局 , 布局中的子组件沿垂直方向进行排列 , , 常用属性如下 :

space 属性 : 子组件的垂直间距可以通过 space 属性设置 , 默认间距为 0 ;
alignItems 属性 : 设置子组件水平方向的对齐方式 ;
- HorizontalAlign.Start : 水平方向左对齐 ;
- HorizontalAlign.Center : 水平方向居中对齐 , 默认值 ;
- HorizontalAlign.End : 水平方向右对齐 ;
justifyContent 属性 : 设置子组件垂直方向的对齐方式 ;
- FlexAlign.Center : 垂直方向居中对齐 ;
- FlexAlign.Top: 垂直方向顶部对齐 , 默认值 ;
- FlexAlign.Bottom: 垂直方向底部对齐 ;

代码示例 :

@Entry
@Component
struct Example {
  build() {
    Column({ space: 20 }) { // 设置子组件间距为10

      Text('Text1')
        .fontSize(20)
        .backgroundColor(Color.Green)

      Text('Text2')
        .fontSize(20)
        .backgroundColor(Color.Yellow)

      Text('Text3')
        .fontSize(20)
        .backgroundColor(Color.Gray)

    }
    .width('50%') // 设置 Row 的宽度
    .height('50%') // 设置 Row 的高度
    .backgroundColor(Color.Pink)
    .alignItems(HorizontalAlign.Center) // 水平居中
    .justifyContent(FlexAlign.Center) // 垂直居中
  }
}

预览器效果 :