HarmonyOS鸿蒙开发入门,常用ArkUI组件学习(一)

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

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

组件一: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"
      }
    ],

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

  1. PixelMap格式,加载本地照片,照片存在media目录下:

    固定格式
    Image($r('app.media.shuaige')

    这里注意在图片后面不能加后缀名,加了会报错。

  2. Resource格式,将图片存在rawfile中,打印照片。

    rawfile目录如下:

    固定搭配:
    Image($rawfile('shuaige.jpg'))

    这里必须加文件后缀,不加会报错

组件二:Text

  • 用法: 显示文本组件

  • 具体用法:

    Text(string | Resource)

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

    预览器如下:

组件三:TextInput

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


ArkTS 复制代码
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%')
  }
}

效果如下:

相关推荐
云上艺旅2 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得2052 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
写雨.03 小时前
鸿蒙定位开发服务
华为·harmonyos·鸿蒙
A旧城以西4 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ4 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL000754 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆4 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone4 小时前
MySQL学习集--DDL
数据库·sql·学习
齐尹秦5 小时前
HTML 音频(Audio)学习笔记
学习
瞌睡不来5 小时前
(学习总结32)Linux 基础 IO
linux·学习·io