HarmonyOS ArkUI开发基础组件

ArkUI 页面基本都是组件的组合，如;

下面是每一个组件的简单使用

1、Image组件

1.1 图片的三种添加方法

1.2、图片的属性

1.3 代码示例

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#36D')
          .onClick(()=>{
            this.message = 'Hello ArkTs'
          })
        Image($r('app.media.icon'))
         // 数字单位为vp 虚拟像素
          .width(250)
        // 图片插值作用：去锯齿使图片清晰
          .interpolation(ImageInterpolation.High)
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行结果

2、Text组件

2.1 基本知识点

2.2 代码示例

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

  build() {
    Row() {
      Column() {

        Image($r('app.media.icon'))
          .width(250)
            // 数字单位为vp 虚拟像素
          .interpolation(ImageInterpolation.High)

        Text($r('app.string.width_label'))
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行结果及总结：
读取本地资源文件可以根据设备语言读取
要注意配置文件的参数添加。需要更改三个配置文件。

3、TextInput 组件 文本框输入

3.1 基本知识点
3.2 代码示例

图