HarmonyOS4.0 ArkUI组件

目录

简介

搭建开发环境

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应用开发

软件安装完成,开发环境也配置完成后,创建一个新的工程,选择“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 = 150build() {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

滑块组件

滑块中的属性

  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赋值给图片宽度,达到拖动滑块改变图片大小的效果

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux拨号服务器如何创建爬虫ip池

作为一个爬虫技术员,除了要熟练掌握至少一种编程语言外,还应该创建属于自己的爬虫ip池。我们都知道,在进行爬虫采集时,经常会遇到网站各种发爬机制,如果有自己的ip池,将会让爬虫这项枯燥无味的工作变得非常…

OLED双面显示广告机的应用场景

OLED双面显示广告机是一种创新的广告设备,它具有双面显示屏幕,可以同时向两个方向展示广告或信息。这种设备被广泛应用于各种场景,例如: 商业展示:在大型商业场所,如购物中心、百货商场等,OLED双…

RPC 简介

RPC 简介 RPC代表远程过程调用(Remote Procedure Call),它是一种通信协议,允许一个计算机程序调用另一个地址空间(通常是另一台机器上)的过程或函数,就像本地调用一样,而无需显式编…

Git常用命令#切换分支

要在 Git 中切换分支,你可以使用 git checkout 命令。 a.创建新分支并切换到该分支 如果你想要创建一个新分支并立即切换到该分支,可以使用以下命令: git checkout -b 新分支名这会创建一个名为 新分支名 的新分支,并将你的工作目…

运维知识点-Nginx

Nginx Nginx解析安全实战预备知识实验目的#制作图片木马# web服务器-Nginx服务命令及配置centOS7安装安装所需插件安装gccpcre、pcre-devel安装zlib安装安装openssl Nginx解析安全实战 预备知识 NginxPHP/FastCGI构建的WEB服务器工作原理 Nginx|FastCGI简介 Nginx (“engin…

飞天使-elk搭建补充

文章目录 es 集群创建密码kibana 配置文件以及和nginx配置pm2 安装定期清理索引以及告警logstash 配置filebeat 配置文件nginx 的日志索引 es 集群创建密码 参考这篇博文进行设置:https://juejin.cn/post/7079955586330132487 最后的效果 #curl -XGET http://127.0…

微服务详细介绍(什么是微服务)

微服务是一种架构风格,它将复杂的应用程序拆分成一系列小型、独立的服务。每个服务都可以独立部署、扩展和维护,而无需对整个应用程序进行修改。 微服务架构有以下特点: 服务拆分:将应用程序拆分成多个小型服务。 独立部署&…

云轴科技ZStack信创云平台助力国泰君安期货实现信创改造

信创是数字中国建设的重要组成部分,也是数字经济发展的关键推动力量。作为云基础软件企业,云轴科技ZStack 产品矩阵全面覆盖数据中心云基础设施,ZStack信创云首批通过可信云《一云多芯IaaS平台能力要求》先进级,是其中唯一兼容四种…

数据爬取+数据可视化实战_哪里只得我共你(Dear Jane)_词云展示----网易云

一、前言 歌词上做文本分析,数据存储在网页上,需要爬取数据下来,词云展示在工作中也变得日益重要,接下来将数据爬虫与可视化结合起来,做个词云展示案例。 二、操作步骤 代码如下: # -*- coding:utf-8 -*-…

【ArcGIS Pro二次开发】(78):批量合并GDB数据库

有些GDB数据库会按分幅或行政区划进行分开储存,尤其是一些地形测绘或国情地理数据。 如下图所示: 数据是完整的,但使用的时候要一个一个拖进地图中,进行分析的时候也需要将其合并后使用。 因此就做了这个合库工具。 一、要实现的…

红队专题-fuzz技巧

红队专题 0x00 知己知彼常见 waf 收集SecureSphere (Imperva)西数WTS-WAF安全狗D盾腾讯云 waf阿里云云盾Web应用防火墙云锁UPUPW安全防护宝塔网站防火墙网防G01护卫神智创防火墙腾讯云玄武盾ISG 0x01 waf 绕过(过狗)姿势 举例SQL注入篇1.内联注释绕过2.等价替换法:3…

单片机AVR单片机病房控制系统设计+源程序

一、系统方案 设计一个可容8张床位的病房呼叫系统。要求每个床位都有一个按钮,当患者需要呼叫护士时,按下按钮,此时护士值班室内的呼叫系统板上显示该患者的床位号,并蜂鸣器报警。当护士按下“响应”键时,结束当前呼叫…

程序/进程替换(讲解)

本文旨在讲解进程替换的知识!希望读完本文,能使读者对进程替换有更深一步的认识!!好的,废话不多说,干货来了! 进程替换的引进! 为什么要引进进程替换呢?我们创建子进程总…

Achronix推出基于FPGA的加速自动语音识别解决方案

提供超低延迟和极低错误率(WER)的实时流式语音转文本解决方案,可同时运行超过1000个并发语音流 2023年11月——高性能FPGA芯片和嵌入式FPGA(eFPGA IP)领域的领先企业Achronix半导体公司日前自豪地宣布:正式…

ethtool工具添加并验证网口

Filesystem Packages->console->network->ethtool 命令描述: ethtool 是用于查询及设置网卡参数的命令。 使用命令: ethtool ethx //查询ethx网口基本设置,其中 x 是对应网卡的编号,如eth0、eth1等等 ethtool –…

【NodeJS】 API Key 实现 短信验证码功能

这里使用的平台是 短信宝整体来讲还是挺麻烦的平台必须企业才行,个人是无法使用该平台的 平台必须完成 身份信息认证 和 企业认证 这里就需要 “营业执照”了 ,没有 “营业执照” 的朋友还是后退一步吧 后端我用的是NodeJS ,使用第三方库 ro…

【Java ——异常机制详解】

Java异常是Java提供的一种识别及响应错误的一致性机制,java异常机制可以使程序中异常处理代码和正常业务代码分离,保证程序代码更加优雅,并提高程序健壮性。本文综合多篇文章后,总结了Java 异常的相关知识,希望可以提升…

统信UOS和vue.js的一个兼容问题

作者:朱金灿 来源:clever101的专栏 为什么大多数人学不会人工智能编程?>>> 这事到现在说起还很奇怪,在UOS20(硬件为华为鲲鹏服务器,arm架构,g8.3)上部署uve.js&#xff0…

Excel 使用技巧

Excel 使用技巧 注意: excel 中设计计算的字符尽量使用英文。 拼接两段文字(字符串拼接) 方法一 在需要计算的单元格上,键入 点击 A1(点击需要拼接的单元格) & C1(点击需要拼接的单元格) 举例: 姓名栏想要拼接 姓 和 名 两列点击姓名这一…

Leetcode 450 删除二叉搜索树中的节点

删除二叉搜索树的节点要比插入一个节点更难,区别在于,我们总能找到一个叶子节点,把我们要插入的值缀在后面。 但是删除节点不总是删除叶子节点,还有可能删除一个中间节点,这就需要额外的操作。 我们需要分情况来讨论。…