HarmonyOS4.0 ArkUI组件

爱被打了一巴掌 2024-04-23 20:22 6阅读 0赞

**目录**

简介

搭建开发环境

ArkUI基础组件

Image组件

Text组件

TextInput

Button

Slider

--------------------

## 简介 ##

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

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

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

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

## 搭建开发环境 ##

下载安装软件DevEco Studio

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

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

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

![52972f4e0eb54f559b78c44167f2eb1d.png][]

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

![56f26e8451524924b744ed903978920b.png][]

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

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

![6ebf3289469745a197c82dfb8f4f605c.png][]

然后点击phone再点击New Emulator

![7c28a95fdb074aedb09abc0d41d90529.png][]

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

![e7bc3845e1a544259bcf678a6ecf604a.png][]

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

![99f162e158c14211abcd628ce1793c62.png][]

## 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%')
      }
    }

![a0006ac26c4d47bc805001802d71d7ad.png][]

**2.本地图片**

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

![b2e694eb14244428a2f42f79dfb63b08.png][]

### Text组件 ###

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

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

![50dfabf8f55d4b68916d46896f96f134.png][]

但是这样子的文本是写死的，应用如果需要面向国际，有切换语言的需求，那么就需要使用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也要加上，这里随意加一种语言的就好

![718ae5d0831f4165bf1f9185c496804b.png][]

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

![8e11e5bd04c04f6493d0ad682795619a.png][]

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

![16f97baaf1c64e8986954bf2ec671ca9.png][]

### 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%')
      }
    }

![676d404d50844b4d8be497359440ed57.png][]

### Button ###

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

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

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

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

![495da0edb8e443e89690c38a4dd6d96a.png][]

### Slider ###

滑块组件

滑块中的属性

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

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

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

![b14773ebba1245af937cc2b5ca52096d.png][]

[-_-_-HarmonyOS]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/software_install-0000001053582415-V3
[52972f4e0eb54f559b78c44167f2eb1d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/a12a72b8fbf54a768dda77431f50790e.png
[56f26e8451524924b744ed903978920b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/233434b8c7d046d485c146f375d99e7a.png
[6ebf3289469745a197c82dfb8f4f605c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/20e9d1265d8e44e3b00e6a23a5396ab8.png
[7c28a95fdb074aedb09abc0d41d90529.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/6c6adb8b6c7d4b1cbcee164d22c9889a.png
[e7bc3845e1a544259bcf678a6ecf604a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/86220eee2ae2488caa5485729aa35cba.png
[99f162e158c14211abcd628ce1793c62.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/2ef99a18c9d94f58baaac40bd0a3074d.png
[a0006ac26c4d47bc805001802d71d7ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/af3544e4250c43fb99ef608c48a2f055.png
[b2e694eb14244428a2f42f79dfb63b08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/8282c16d8e69458c876493236efc520a.png
[50dfabf8f55d4b68916d46896f96f134.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/cc4c08c9d8e348898367e07b25a7a1f4.png
[718ae5d0831f4165bf1f9185c496804b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/d878997a28794475ab8577849869dcb8.png
[8e11e5bd04c04f6493d0ad682795619a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/83c20cbbe77d47dd8e2e536118f1792b.png
[16f97baaf1c64e8986954bf2ec671ca9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/23e7d11f692b40fabe764414c2540f8b.png
[676d404d50844b4d8be497359440ed57.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/202b6ba44d974b879f9141d6f7e4f592.png
[495da0edb8e443e89690c38a4dd6d96a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/470570725dd64d199ee88f457c56924d.png
[b14773ebba1245af937cc2b5ca52096d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/99eb0735ebcd491faa4d585ef983f0d7.png