当前位置：首页 > article >正文

HarmonyOS鸿蒙开发入门，常用ArkUI组件学习（一）

article 2024/12/25 2:09:28

刚开始接触HarmonyOS的开发，希望不会太晚。在我学习的过程中，我会将我学到的内容，通过写博客的形式，来进行回忆和复习。同时也希望能够遇到志同道合的朋友，我们一起学习，一起进步，文章中有什么不对的地方，也希望各位能够指出来，希望最后我们都可以有所收获。

目录，可以点击跳转到想要了解的组件详细内容

- 组件一：Image
- 组件二：Text
- 组件三：TextInput

组件一：Image

用法：图片显示组件
具体用法：

声明Image组件并设置图片源：
Image(src: string|PixelMap|Resource)

1.string格式，通常是用来加载网络中的图片，需要申请网络权限。
```
Image('https://a.520gexing.com/uploads/allimg/2018091710/bwqefgkpak4.jpg')
```
预览器显示如下：

注意： 当我们将我们的设备部署到我们真实的设备或虚拟机上时，不会和预览器一样显示我们直接引用的网站图片，这是因为在我们进行真实使用app时，app需要访问权限，未经允许我们不可以直接获得访问照片的权限。

解决方法：
我们需要在我们的安全配置信息中加入对网络图片的访问请求，方法如下:
在这里插入图片描述
点开module.json5后，我们可以看到一些已有的模块配置

我们要加入以下代码，来进行对网络请求的配置

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

在加入这段代码后，我们可以通过虚拟机或真机看到网络导过来的照片。

PixelMap格式，加载本地照片，照片存在media目录下：

固定格式
Image($r('app.media.shuaige')
这里注意在图片后面不能加后缀名，加了会报错。
Resource格式，将图片存在rawfile中，打印照片。
rawfile目录如下：

固定搭配：
Image($rawfile('shuaige.jpg'))
这里必须加文件后缀，不加会报错

组件二：Text

用法： 显示文本组件
具体用法：

Text(string | Resource)

当我们使用string格式时，我们在Text组件中输入什么字符串，在我们的预览器中就会出现什么字，实例如下：

预览器如下：

组件三：TextInput

ArkTS中的TextInput是一个用于输入文本的组件。它提供了一个文本输入框，用户可以在其中输入文字。下面是TextInput组件的一些参数：

在这里插入图片描述

import router from '@ohos.router'
@Entry
@Component
struct Index {
  @State message: string = '欢迎登录'
  @State userName: string = '';//用户名
  @State passWord: string = '';//密码
  build() {
    Row() {
      Column({space:4}) {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

        TextInput({placeholder: '请输入用户名：'}).width('95%')
          .onChange((value)=>{
            this.userName = value;
          })
        TextInput({placeholder: '请输入密码：'}).width('95%').type(InputType.Password)
          .onChange((value)=>{
            this.passWord = value;
          })
        Button('登录')
          .margin({top:20})
          .colorBlend('red')
          .onClick(()=>{
            router.pushUrl({
              url:'pages/LoginOKPage',
              params: {
                userNameParam:this.userName,
                passWordParam:this.passWord,
              }
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果如下：
在这里插入图片描述