【HarmonyOS】ArkUI - Image、Text、TextInput、Button、Slider 基本用法

一、Image - 图片显示组件

1. 声明 Image 组件并设置图片源

   Image(src: string | PixelMap | Resource)
   

   src：图片源。是一个联合类型（Union Types），支持三种格式
   • string 格式，通常用来加载网络图片

      Image('https://xxx.png')
     

     注：使用 Stage 模型的应用，需要在 module.json5 文件中声明网络访问权限

     "requestPermissions": [
      {
         "name": 'ohos.permission.INTERNET'
      }
     ]
     

   • PixelMap 格式，可以加载像素图，常用在图片编辑中

      Image(pixelMapObject)
     

   • Resource 格式，加载本地图片

      Image($r('app.media.icon')) -> 读取 media 目录里的图片
     
      或
     
      Image($rawfile('icon.png')) -> 读取 rawfile 目录里的图片
     

2. 添加图片属性
   • 设置组件通用属性：

      Image($r('app.media.icon'))
        .width(100)                             // 设置宽度
        .height(100)                            // 设置高度
        .borderRadius(40)                       // 边框圆角
     

   • 设置组件特有属性：

      Image($r('app.media.icon'))
        .interpolation(ImageInterpolation.High) // 图片插值
          
      图片插值的作用：
      有些低分辨率的图片一旦放大以后就会出现锯齿，看起来不清晰。设置图片插值，就会弥补图片的锯齿，视觉效果是看起来清晰度变高了。
     

二、Text - 文本显示组件

1. 声明 Text 组件并设置文本内容

    Text(content?: string | Resource)
   

   content：展示的文本内容。是一个联合类型（Union Types），支持两种格式
   • string 格式，直接填写文本内容

      Text('文字内容')
     

   • Resource 格式，读取本地资源文件

      Text($r('app.string.module_desc')) -> 读取 element 目录里的 string.json
     

2. 添加文本属性

    Text('一段文字')
      .lineHeight(32)              // 行高
      .fontSize(20)                // 字体大小
      .fontColor('#FF00FF')        // 字体颜色
      .fontWeight(FontWeight.Bold) // 字体粗细
   

三、TextInput - 文本输入框组件

1. 声明 TextInput 组件：

    TextInput({ placeholder?:ResourceStr, text?:ResourceStr })
   

   • placeholder：输入框无输入时的提示文本

      TextInput({ placeholder: '无输入时的提示文本' })
     

   • text：输入框当前的文本内容

      TextInput({ text: '当前的文本内容' })
     

2. 添加属性和事件

   • 设置组件通用属性：

      TextInput({ text: '当前的文本内容' })
        .width(200)                      // 宽
        .height(50)                      // 高
        .backgroundColor('FFF')          // 背景色
     

   • 设置组件特有属性：

      TextInput({ text: '当前的文本内容' })
        .type(InputType.PhoneNumber)    // 输入框类型
        .onChange(value => {
          // value 是用户输入的文本内容
        })
     

     输入框类型 type：

     名称	类型
     Normal	基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。
     Number	纯数字输入模式。
     PhoneNumber	电话号码输入模式。支持输入数字、+、-、*、#，长度不限。
     Email	邮箱地址输入模式。支持数字、字母、下划线、以及@字符。
     Password	密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。

     事件方法 onChange：
     当用户在文本输入框输入内容发生变化以后触发的事件，value 就是最新的文本内容。

四、Button - 按钮组件

1. 声明 Button 组件：

    Button(label? : ResourceStr)
   

   label：是按钮上面要显示的文字，可选参数，可以传也可以不传
   • 如果参数，就是一个文字型按钮

      Button('按钮')
     

   • 如果不传参数，就没有文字描述，就需要给按钮内部嵌套其他组件，就是一个自定义按钮

      Button() {
        Image($r('app.media.icon')).width(20).margin(10)
      }
     

2. 添加属性和事件

   • 设置组件通用属性：

      Button('按钮')
        .width(100)              // 宽
        .height(30)              // 高
     

   • 设置组件特有属性：

      Button('按钮')
        .type(ButtonType.Normal) // 按钮类型
        .onClick(() => {
          // 处理点击事件
        })
     

     按钮类型 type：

     名称	描述
     Capsule	胶囊型按钮（圆角默认为高度的一半）。
     Circle	圆形按钮。
     Normal	普通按钮（默认不带圆角）。

     事件方法 onClick：
     当按钮点击时会触发 onClick 事件

五、Slider - 滑动条组件

1. 声明 Slider 组件：

    Slider(options?: SliderOptions)
   

   options：滑动条配置属性
2. 添加属性和事件

    Slider({
      min: 0,                     // 最小值
      max: 100,                   // 最大值
      value:30,                   // 当前值
      step:10,                    // 滑动步长
      style:SliderStyle.OutSet,   // 样式
      direction:Axis.Horizontal,  // 方向
      reverse:false               // 是否反向滑动
    })
   

   • step：
     滑动步长。每滑动一次 value 会增加或减少的值，默认值是 1。
   • style：
     滑动条的样式。
     默认值是 Outset，也就是滑块在滑动条的外面。
     InSet，滑块在滑动条的里面。
   • direction：
     滑动条的方向。
     默认值是 Horizontal，水平方向。
     Vertical，垂直方向。（默认情况下，最下面是最大值，最上面是最小值）

• 设置组件通用属性：

   Slider()
     .width('90%') // 宽度
  

• 设置组件特有属性：

   Slider()
     .trackThickness(10)     // 滑轨粗细
     .showTips(true)         // 是否展示 value 百分比提示
     .blockColor('#000')     // 滑块颜色
     .onChange(value => {
       // value 就是当前滑块值
     })
  

  事件方法 onChange：
  滑块在滑动的过程中，它所对应的值在变更，每一次值变更就会触发 onChange 事件，value 就是当前滑块对应的值。