HarmonyOS4.0 ArkUI常用组件

一、Image

语法：

Image(src:string|PixelMap|Resource)

使用方式：

• string格式：用来加载网络图片，需要在module.json5中申请网络访问权限：ohos.permission.INTERNET

  • Image("http://xxx.png")
    

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

  • 需要传递pixelMapObject对象，比较繁琐

  • Image(pixelMapObject)
    

• Resource格式：加载本地图片，推荐使用

  • Image($r(“app.media.xxx”))
    • app.media固定写法
    • 指向resources/base/media
    • 可省略图片后缀名
  • Image($rawfile(“xxx.png”))
    • 直接指向resources/rawfile
    • 不能省略图片后缀名

  

二、Text

语法：

Text(string|Resource)

使用方式：

• string格式，直接填写文本内容

  • Text("文本内容")
    

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

  • test_label是一个变量名，当Text组件中的内容不想固定时，可以把数据添加到base/element/string.json中，或者添加到en_US/element/string.json、zh_CN/element/string.json中，系统首先会根据系统的中英文去找en_US或者zh_CN，如果都不匹配，就去默认的base下查找，一般内容会保存国家、语言、设备号等一些信息。

  • Text($r("app.string.test_label"))
    

  • 注意：en_US和zh_Cn设置完后base下也要设置，但是base下的Value无所谓

  • // zh_CN下
    {
      "name": "test_label",
      "value": "测试内容"
    }
    
    // en_US下
    {
      "name": "test_label",
      "value": "test content"
    }
    
    // base下
    {
      "name": "test_label",
      "value": "label"
    }
    

  • @Entry
    @Component
    struct Page4 {
      @State message: string = 'Hello World'
    
      build() {
        Row() {
          Column() {
            Text($r("app.string.test_label"))
              .fontSize(40)
              .fontWeight(FontWeight.Bold)
              .fontColor("#bfda83")
              .lineHeight(40)
          }
          .width('100%')
        }
        .height('100%')
      }
    }
    

  

三、TextInput

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。

1、创建输入框

语法：

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})

• Placeholder：内容提示
• Text：文本内容

@Entry
@Component
struct TextInputUI {

  build() {
    Row() {
      Column() {
      
        TextInput({placeholder:"请输入用户名"})
          .width(200)

        TextInput({text:"文本内容"})
          .width(200)
          .backgroundColor("#1758f0")
          .type(InputType.Password)

      }
      .width('100%')
    }
    .height('100%')
  }
}

2、事件方法

@Entry
@Component
struct TextInputUI {
  build() {
    Row() {
      Column() {
      
        TextInput({ text: "文本内容" })
          .width(200)
          .backgroundColor("#1758f0")
          .type(InputType.Password)
          .onChange(value => {
            console.log(value)
          })

        /**
            输入框文本内容发生改变就会触发onChange事件
            完整写法：
            onChange((value:string)=>{
              console.log(value)
            })
            如果只有一个参数，那么括号可以省略，并且string类型可以省略
         */

      }
      .width('100%')
    }
    .height('100%')
  }
}

3、案例需求

利用文本输入框的内容来控制图片的大小

@Entry
@Component
struct TextInputUI {

  @State num:number = 200

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


        Image($r("app.media.1"))
          .width(this.num)


        TextInput({ text: this.num.toString() })
          .width(200)
          .backgroundColor("#1758f0")
          .type(InputType.Normal)
          .onChange(value => {
          /*
          ArkTS不允许使用全局对象的属性和方法： Infinity, NaN, isFinite, isNaN, parseFloat, parseInt
          可以使用Number的属性和方法： Infinity, NaN, isFinite, isNaN, parseFloat, parseInt
          API9可以直接使用：parseInt
          API10需要这样使用：Number.parseInt
          */
            this.num = Number.parseInt(value)
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

四、TextArea

用法和TextInput一致，为了的区别就是TextArea是一个多行输入框，在输入框中可以换行

语法：

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})

五、Button

• 普通按钮

  • Button("普通按钮")
    

• 自定义按钮：在Button内嵌套其他组件

  • Button(){
      Image($r("app.media.icon")).width(70).margin(100)
    }.type(ButtonType.Circle) // 按钮类型  圆形等等
    .onClick(()=>{
      console.log("事件函数")
    })
    

六、Slider

Slider：滑动条组件

语法：

Slider(option?:SliderOptions)

属性：

Slider({
    min:0, // 最小值
    max:100,// 最大值
    value:30,// 当前值
    step:10,// 滑动步长
    style:SliderStyle.OutSet,// 滑块在滑条外面，InSet：滑块在滑条里面
    direction:Axis.Horizontal,// 滑条水平方向， Vertical：滑条垂直方向
    reverse:false// 是否反向滑动，最大值和最小值是否换位置
})
@Entry
@Component
struct SliderUI {

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

        Slider({
          min:0,
          max:100,
          value:30,
          style:SliderStyle.OutSet
        })
          .width("90%")
          .showTips(true) // 是否展示value的百分比
          .blockColor("#a9b529") // 滑块的背景色
          .trackThickness(8) // 滑动条粗细
          .onChange(value=>{
            console.log(value.toString())
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}
dth("90%")
          .showTips(true) // 是否展示value的百分比
          .blockColor("#a9b529") // 滑块的背景色
          .trackThickness(8) // 滑动条粗细
          .onChange(value=>{
            console.log(value.toString())
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}