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

刚开始接触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"
      }
    ],

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

  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组件的一些参数:

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/908467.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

shell脚本案例:创建用户和组

使用场景 在部署程序时,往往首要任务是创建用户和组。有的程序可能用到的组、用户比较多;且不知道服务器环境是否已经有了所需的组和用户。所以针对这个情况,根据Oracle RAC部署时的实际情况写了个脚本。 Linux版本 脚本代码 #!/bin/bash …

【设计模式】结构型模式(一):适配器模式、装饰器模式

结构型模式(一):适配器模式、装饰器模式 1.适配器模式(Adapter)2.装饰器模式(Decorator)2.1 主要特点2.2 组成部分2.3 示例代码2.3.1 Component 组件2.3.2 ConcreteComponent 具体组件2.3.3 Dec…

交换机的基本配置

交换机的基本配置 实验题目实验目的实验任务实验设备实验环境实验步骤VLAN 的简单配置跨交换机 vlan 的配置主机配置信息表解释: vlan 间路由 实验题目 交换机的基本配置。 实验目的 1) 理解交换机的原理和应用场景; 2) 交换机的基本指令系统&#xf…

QFrameWork学习指南

QFramework官网地址:Wiki - 木兰确实 1、界面设计 (1)CounterAppController的界面 BtnAdd和BtnSub为Button组件,CountText为Text组件,后续的脚本挂载Canvas上。 (2)OnGUI OnGUI是Unity中通过…

黄金价格下跌,原油价格激增,小麦价格面临阻力

黄金价格回落 现货黄金价格达到每金衡盎司 $2,790.00 的新纪录高点,接近心理关口 $2,800.00,随后在部分交易员在周五美国非农就业数据(NFPs)公布前以及下周美国选举前套现利润的回撤中下跌至 $2,732.00。 在 $2,732.00 以下是 10…

DiskGenius一键修复磁盘损坏

下午外接磁盘和U盘都出现扇区损坏,估计就是在开着电脑,可能是电脑运行的软件还在对磁盘进行读写,不小心按到笔记本关机键,重新开机读写磁盘分区变得异常卡顿,估摸就是这个原因导致扇区损坏。在进行读写时,整…

智慧国土空间规划方法探索与实践应用

在数字化时代背景下,国土空间规划正经历着一场深刻的变革。智慧国土空间规划作为一种新兴的规划理念和方法,其核心在于利用现代信息技术,提高规划的科学性、精准性和动态适应性。本文将探讨智慧国土空间规划的方法探索与实践应用。 1. 智慧国…

从零开发操作系统-为什么磁盘的扇区为 512 byte

你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…

一文了解Android SELinux

在Android系统中,SELinux(Security-Enhanced Linux)是一个增强的安全机制,用于对系统进行强制访问控制(Mandatory Access Control,MAC)。它限制了应用程序和进程的访问权限,提供了更…

Redis-持久化(增量模式和全量模式)

文章目录 一、持久化和Redis持久化概念持久化介绍Redis持久化的介绍全量模式持久化技术——RDB增量模式持久化技术——AOF使用RDB还是AOF? 二、RDB配置以及数据恢复的简单实现RDB快照的工作方式如何关闭RDB持久化功能如何模拟Redis服务器数据丢失?然后再如何具体使…

SQL 常用语句

目录 我的测试环境 学习文档 进入数据库 基础通关测验 语句-- 查 展示数据库; 进入某个数据库; 展示表: 展示某个表 desc 查询整个表: 查询特定列: 范围查询 等于特定值 不等于 介于 特定字符查询 Li…

MFC图形函数学习05——画椭圆函数

MFC中有一个专门绘制椭圆的函数,其参数与绘制矩形参数相同,实际上所绘制的椭圆就是矩形的内切圆椭圆。 一、绘制椭圆函数 原型:BOOL Ellipse (int x1,int y1,int x2,int y2); 参数:椭圆内切矩形的左上角&#xff08…

Spring3(代理模式 Spring1案例补充 Aop 面试题)

Spring3 代理模式概述介绍什么是代理模式?为什么要使用代理模式?有哪几种代理模式?静态代理基于接口实现的动态代理(JDK自带)基于子类的动态代理 Spring_AOP_01案例补充(添加事务管理)实现完整代码:常规实现:代理实现 …

开源模型应用落地-Qwen2.5-7B-Instruct与TGI实现推理加速

一、前言 目前,大语言模型已升级至Qwen2.5版本。无论是语言模型还是多模态模型,均在大规模多语言和多模态数据上进行预训练,并通过高质量数据进行后期微调以贴近人类偏好。在本篇学习中,将集成 Hugging Face的TGI框架实现模型推理…

Android 使用ninja加速编译的方法

ninja的简介 随着Android版本的更迭,makefile体系逐渐增多,导致make单编模块的时间越来越长,每次都需要半个小时甚至更长时间,其原因为每次make都会重新加载所有mk文件,再生成ninja编译,此完整过程十分耗时…

javaNIO核心知识.中

Channel(通道) Channel 是一个通道,它建立了与数据源(如文件、网络套接字等)之间的连接。我们可以利用它来读取和写入数据,就像打开了一条自来水管,让数据在 Channel 中自由流动。 BIO 中的流…

缓存、注解、分页

一.缓存 作用:应用查询上,内存中的块区域。 缓存查询结果,减少与数据库的交互,从而提高运行效率。 1.SqlSession 缓存 1. 又称为一级缓存,mybatis自动开启。 2. 作用范围:同一…

流畅!HTMLCSS打造网格方块加载动画

效果演示 这个动画的效果是五个方块在网格中上下移动&#xff0c;模拟了一个连续的加载过程。每个方块的动画都是独立的&#xff0c;但是它们的时间间隔和路径被设计为相互协调&#xff0c;以创建出流畅的动画效果。 HTML <div class"loadingspinner"><…

【skywalking 】More than 15,000 ‘grammar‘ tokens have been presented. 【未解决请求答案】

问题 skywalking相关版本信息 jdk&#xff1a;17skywalking&#xff1a;10.1.0apache-skywalking-java-agent&#xff1a;9.3.0ElasticSearch : 8.8.2 问题描述 More than 15,000 grammar tokens have been presented. To prevent Denial Of Service attacks, parsing has b…

docker desktop使用ubuntu18.04带图形化+运行qemu

记录一下docker desktop使用ubuntu18.04带图形化命令和使用步骤 1. 下载镜像 参考&#xff1a;【Docker教程】Docker部署Ubuntu18.04(带图形化界面) 命令&#xff1a; docker pull kasmweb/ubuntu-bionic-desktop:1.10.02. 启动镜像 命令&#xff1a; docker run -d -it …