HarmonyOS4.0 ArkUI组件

简介

搭建开发环境

ArkUI基础组件

Image组件

Text组件

TextInput

Button

Slider

简介

HarmonyOS 4.0的ArkUI组件是一套UI开发框架，提供开发者进行应用UI开发时所必须的能力。在ArkUI中，组件是界面搭建与显示的最小单位，开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。

在ArkUI中，组件根据功能可以分为五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。这些组件的功能如下：

基础组件：是视图层的基本组成单元，包括Text（文本）、Image（图片）、TextInput（文本输入）、Button（按钮）、LoadingProgress（加载进度）等。
容器组件：用于封装和布局，比如ScrollView（滚动视图）和ListView（列表视图）等。
媒体组件：用于播放音频和视频，比如Video（视频）和Audio（音频）等。
绘制组件：用于自定义绘制图形，比如Canvas（画布）等。
画布组件：用于多态组件的适配，可以跨平台使用。

在ArkUI中，还支持多种布局方式，如Flex布局、Grid布局等。同时，为了提升用户体验，ArkUI还提供了丰富的动画效果和自定义动画能力。此外，ArkUI还支持多种绘制能力，以满足开发者绘制自定义形状的需求，支持图形绘制、颜色填充、文本绘制、图片绘制等。

搭建开发环境

下载安装软件DevEco Studio

因为下载安装软件官方已经有很详细的文档介绍，点击下方链接根据官网提示完成开发环境搭建

下载与安装软件-快速入门-入门-HarmonyOS应用开发

软件安装完成，开发环境也配置完成后，创建一个新的工程，选择“Empty Ability”模板，编辑名称等相关信息或者保持默认，点击下一步即可

工程创建完成后，点击右侧的Previewer按钮，预览我们的项目，可以看见，第一个项目Hello Word界面就出来了

使用鸿蒙系统的手机来测试更贴合实际，但因为博主没有钱买华为，所以只能使用模拟器，点击右上角的devices，选择Device Manager

（注意：电脑性能不是很好的小伙伴，不建议安装这个模拟器，初学使用预览功能足矣）

然后点击phone再点击New Emulator

选择Phone-x86-api9，下载虚拟机，下载时间会有点久

下载完成后启动虚拟机，桌面上就会有一部鸿蒙系统的手机用于测试

ArkUI基础组件

Image组件

用于在页面中插入图片的组件

1.网络图片

打开项目路径下的Index，将hello wrod部分去掉，代码换成👇面的，可以看见，预览窗口出现了一个图片。Image（）中的URL是我在网上随意找的一个图片地址，这是Image组件的用法之一，可以渲染一个

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Image('https://ts1.cn.mm.bing.net/th/id/R-C.f5bba551c5fde389168f0ce9e2201145?rik=XapyqJ%2b6fXYCcw&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fwater%2ftext%2f2017%2f06-07%2fgoods_water_6525_698_698_.png&ehk=%2fQlYmSlVMMarF6BUBbl11xoDiHtfK0PHpSE85FRcP0s%3d&risl=&pid=ImgRaw&r=0')
          .width(300)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.本地图片

本地图片引用只需将图片放在media文件夹中，然后通过 $r('app.media.图片名称') 进行引用

Text组件

文字组件，用于插入文本内容

我们可以直接通过 Text('文字内容') 直接在页面中插入文本

但是这样子的文本是写死的，应用如果需要面向国际，有切换语言的需求，那么就需要使用Resource格式，读取本地资源，如下图，zh_CN是中国汉字，因此在stirng.json中加入

    {
      "name": "width_label",
      "value": "图片宽度："
    }

那么en_US自然是将value换成英文解析

    {
      "name": "width_label",
      "value": "Image Width："
    }

base=>element=>下的是默认，当en_us和zh_CN都没找到合适的解析，就会在这里寻找匹配的键值，因此这里的string.json也要加上，这里随意加一种语言的就好

然后将 Text('文字内容') 换成 Text($r('app.string.name'))

点击预览窗口上的 ... 将语言切换成en_US，可以看见，文字内容已经变成我们刚刚设置的英文解析

TextInput

输入框组件

有两个可选参数，来设置提示词和默认内容，并且可以通过.type(InputType.Password)来设置成密码框模式。下面代码中，演示通过onChange在输入框内容改变时赋值给imagewidth达到设置图片宽度功能

@Entry
@Component
struct Index {
  @State imageWidth: number = 150

  build() {
    Row() {
      Column() {
        Image($r('app.media.icon'))
          .width(this.imageWidth)
        Text($r('app.string.width_label'))
          .fontSize(30)

        // 输入框未输入内容时的提示词
        TextInput({ placeholder: '请输入手机号:' })
          .width(300)
          .backgroundColor('#36D')

        // 输入框带默认内容
        TextInput({ text: '123456' })
          .width(300)
          .backgroundColor('red')

        // 输入框带默认内容
        TextInput({ text: 'admin' })
          .width(300)
          .type(InputType.Password)
          .backgroundColor('blue')

        //使用onChange做一个互动，输入数值来调整图片宽度
        TextInput({ placeholder: '请输入宽度:' })
          .width(300)
          .backgroundColor('#36D')
          .onChange(value=>{
            this.imageWidth = parseInt(value)
          })


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

Button

按钮组件，直接通过 Button('按钮名称') 添加按钮

我们示例通过添加两个按钮来对图片进行放大缩小

        Button('缩小')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            this.imageWidth -= 10
          })

        Button('放大')
          .width(100)
          .fontSize(30)
          .onClick(()=>{
            this.imageWidth += 10
          })

在onClick中，当按钮被点击时对图片宽度进行修改

Slider

滑块组件

滑块中的属性

min:：最小值
max：最大值
value：当前值，下面案例这里直接把图片初始宽度赋值给它
step：滑块步长
showtips 是否显示百分比

        Slider({
          min: 100,
          max: 300,
          value: this.imageWidth,
          step: 10
        })
          .width('90%')
          .showTips(true)
          .trackThickness(6)
          .onChange(value => {
            this.imageWidth = value
          })

最后也是在onChange中将value赋值给图片宽度，达到拖动滑块改变图片大小的效果