ArkTs简单入门案例:简单的图片切换应用界面

在鸿蒙 OS 应用开发的过程中,我们常常需要通过组合各种组件和编写相应的逻辑来实现丰富多样的功能。今天,我就来和大家详细解析一段实现简单图片切换功能的代码,希望能帮助到那些刚接触鸿蒙 OS 应用开发的朋友们。

一、代码导入部分

@Entry
@Component
struct Index {@State isToggle: boolean = false;build() {Column({space: 20}){if(this.isToggle){Image('pages/image/1.png').height(300).width(300).borderRadius(20)} else {Image('pages/image/2.png').height(300).width(300).borderRadius(20)}Row({space: 50}){Button('图片1').onClick(() => {this.isToggle = false})Button('图片2').onClick(() => {this.isToggle = true})}}.height('100%').width('100%').justifyContent(FlexAlign.Center)}

二、具体代码分析

1. @Entry

  • 这是一个装饰器(Decorator),用于标记一个组件(Component)作为应用程序的入口点。在使用特定框架(鸿蒙 OS 相关框架)开发应用时,被标记为 @Entry 的组件将是应用启动后首先被渲染和展示的部分。

2. @Component

  • 同样是一个装饰器,用于定义下面的结构体 Index 为一个组件。组件是构建用户界面的基本单元,它可以包含其他组件、视图元素以及相关的逻辑处理代码。

3. struct Index {... }

  • 这里定义了一个名为 Index 的结构体,在这个结构体内部将构建整个应用的界面以及相关的状态和逻辑。结构体是一种数据结构,可以包含多个成员变量和函数,在这里主要用于组织界面组件和相关逻辑代码。

4. @State isToggle: boolean = false;

  • @State 是一个装饰器,从我们前面导入的 @ohos/state 库中获取,用于标记 isToggle 这个变量为组件的状态变量。状态变量的特点是当它的值发生改变时,会触发组件的重新渲染,以反映最新的状态变化。在这里,isToggle 被初始化为 false,它将用于控制显示哪一张图片。

5. build() {... }

  • build 函数是组件结构体中必须定义的函数,它用于构建组件的用户界面。在这个函数内部,通过组合各种视图组件(如 ColumnImageRowButton 等)来创建最终展示给用户的界面布局和内容。

6. Column({space: 20}){... }

  • 创建一个垂直布局的容器组件 Column,它会将包含在其中的子组件按照垂直方向依次排列。{space: 20} 是传递给 Column 的时间参数,表示相邻子组件之间在垂直方向上的间距为 20 个单位(具体单位可能根据应用的设计规范而定)。

7. if(this.isToggle){... } else {... }

  • 这是一个条件判断语句。根据 this.isToggle 的值(即组件状态变量的值)来决定显示哪一张图片。如果 isToggle 为 true,则显示 Image('pages/image/1.png') 相关设置的图片;如果 isToggle 为 false,则显示 Image('pages/image/2.png') 相关设置的图片。

8. Image('pages/image/1.png') 和 Image('pages/image/2.png')

  • 分别用于创建显示指定路径下图片的类型。这里的路径 pages/image/1.png 和 pages/image/2.png 就是要显示的图片在应用资源中的存储位置。通过这些组件,将对应的图片展示在界面上。

9. .height(300).width(300).borderRadius(20)

  • 这些都是对图片组件(Image)的样式设置方法。.height(300) 设置图片的高度为 300 个单位;.width(300) 设置图片的宽度为 300 个单位;.borderRadius(20) 给图片设置一个半径为 20 个单位的圆角效果,使图片呈现出圆角矩形的外观。

10. Row({space: 50}){... }

  • 创建一个水平布局的容器组件 Row,它会将包含在其中的子组件按照水平方向依次排列。{space: 50}$是传递给 Row` 的参数,表示相邻子组件之间在水平方向上的间距为 50 个单位。

11. Button('图片1') 和 Button('图片2')

  • 分别用于创建两个按钮组件,按钮上显示的文本分别为 “图片 1” 和 “图片 2”。这些按钮将作为用户交互的元素,用于触发改变图片显示的操作。

12. .onClick(() => {... })

  • 这是给按钮组件添加点击事件处理函数的方法。对于 Button('图片1'),当用户点击这个按钮时,会执行 () => { this.isToggle = false } 这个匿名函数,即将 isToggle 的值设置为 false,从而触发界面重新渲染,显示 Image('pages/image/2.png') 对应的图片;同理,对于 Button('图片2'),点击时会执行 () => { this.isToggle = true },显示 Image('pages/image/1.png') 对应的图片。

13. .height('100%').width('100%').justifyContent(FlexAlign.Center)

  • 这些是对整个 Column 组件(也就是最外层的布局容器)的样式设置。.height('100%')$和 $.width('100%')$表示让 Column组件占据整个父容器的高度和宽度,确保其铺满整个可用空间。$.justifyContent(FlexAlign.Center)$是设置Column` 对 子组件在垂直方向上的对齐方式为居中对齐,使整个界面布局看起来更加整齐美观。

三、运行结果

四、总结

这段代码主要实现了一个简单的图片切换应用界面。通过定义一个组件 Index,利用状态变量 isToggle 来控制显示两张不同的图片(根据 isToggle 的值在 Image('pages/image/1.png') 和 Image('pages/image/2.png')$之间切换)。同时,设置了两个按钮(“图片1”和“图片2”),用户点击按钮可以改变 isToggle$ 的值,进而实现图片的切换效果。整个界面采用了 Column(垂直布局)和 Row(水平布局)的容器组件来组织图片和按钮,并且对各个组件进行了相应的样式设置,以呈现出一个较为美观、功能完整的图片切换应用界面。

希望通过这次对代码的详细解析,能让大家对鸿蒙 OS 应用开发中的界面构建和逻辑处理有更深入的理解,在自己的开发之旅中能够更加得心应手。

五、官方文档

如果想要了解整个的项目结构,还有编辑器的使用可以去看详细的官方文档去了解

工具简介-DevEco Studio - 华为HarmonyOS开发者

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

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

相关文章

influxDB 时序数据库安装 flux语法 restful接口 nodjsAPI

安装 Install InfluxDB | InfluxDB OSS v2 Documentation Debian和Ubuntu用户可以用apt-get包管理来安装最新版本的InfluxDB。 对于Ubuntu用户,可以用下面的命令添加InfluxDB的仓库,添加之后即可apt-get 安装influxdb2 wget -q https://repos.influx…

丹摩征文活动|丹摩智算平台使用指南

目录 1. 登录平台与工作环境设置1.1 访问与登录1.2 创建或选择项目1.3 初始化项目环境 2. 数据上传与管理2.1 数据上传2.2 数据管理与预处理2.3 数据可视化 3. 模型构建与训练3.1 模型选择3.2 参数配置3.3 模型训练与评估 4. 模型部署与应用4.1 模型部署4.2 接口调用与集成4.3 …

NAT网络工作原理和NAT类型

NAT基本工作流程 通常情况下,某个局域网中,只有路由器的ip是公网的,局域网中的设备都是内网ip,内网ip不具备直接与外部应用通信的能力。 处于内网的设备如何借助NAT来实现访问外网的应用? 对于开启了NAT功能的局域网…

LLMs 如何处理相互矛盾的指令?指令遵循优先级实验

编者按:想象一下,你正在开发一个 AI 助手,突然发现 system message 和用户提示词存在冲突,这时 AI 会听谁的?这种情况不仅困扰着开发者,还可能导致 AI 系统的不稳定和不可预测,影响用户体验和系…

qt QProcess详解

1、概述 QProcess是Qt框架提供的一个类,它用于在应用程序中执行外部进程。QProcess提供了一系列函数来启动、控制和与外部进程进行交互,使得开发者能够在自己的应用程序中集成和调用其他程序或服务。这个类在需要执行系统命令、启动其他应用程序或进行文…

Appium配置2024.11.12

百度得知:谷歌从安卓9之后不再提供真机layout inspector查看,仅用于支持ide编写的app调试用 所以最新版android studio的android sdk目录下已经没有了布局查看工具... windows x64操作系统 小米k30 pro手机 安卓手机 Android 12 第一步&#xff1a…

《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明

参考 《element plus 使用 icon 图标(两种方式)》使用 icon 升级 Vue2 升级 Vue3 项目时,遇到命名时的实心与空心点差异! ElementUI: 实心是 el-icon-more空心是 el-icon-more-outline ElementPlus: 实心是 el-icon-more-fill…

WebSocket和HTTP协议的性能比较与选择

WebSocket和HTTP协议的性能比较与选择 引言: 在web应用开发中,无论是实时聊天应用、多人在线游戏还是实时数据传输,网络连接的稳定性和传输效率都是关键要素之一。目前,WebSocket和HTTP是两种常用的网络传输协议,它们…

【数据结构与算法】第11课—数据结构之选择排序和交换排序

文章目录 1. 选择排序1.1 直接选择排序1.2 堆排序 2. 交换排序2.1 冒泡排序2.2 快速排序(找基准值法1----Hoare版本)2.2.1 特殊场景12.2.2 特殊场景22.2.3 代码2.2.4 快速排序的时间复杂度 2.3 快速排序(找基准值法2---挖坑法)2.3.1 特殊情况1处理2.3.2 特殊情况2处理 2.4 快速…

MySQL技巧之跨服务器数据查询:进阶篇-从A数据库复制到B数据库的表中

MySQL技巧之跨服务器数据查询:进阶篇-从A数据库复制到B数据库的表中 基础篇已经描述:借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MySQL数据库的连接名: MY_ODBC_MYSQ…

UVC 输出视频格式修改和windows下数据分析

文章目录 前言一、UVC MJPEG视频帧描述符1.MJPG视频帧格式示例 二、UVC YUV2、NV12、M420、I420无压缩视频帧描述符GUID1.如YUV2数据参数初始为: 三、UVC Windows下UVC摄像头数据分析总结 前言 提示:这里可以添加本文要记录的大概内容: 项目需要&#…

大数据开发面试宝典

312个问题,问题涵盖广、从自我介绍到大厂实战、19大主题,一网打尽、真正提高面试成功率 一、Linux 1. 说⼀下linux的常⽤命令? 说一些高级命令即可 systemctl 设置系统参数 如:systemctl stop firewalld关闭防火墙 tail / hea…

更改Ubuntu22.04锁屏壁纸

更改Ubuntu22.04锁屏壁纸 sudo apt install gnome-shell-extensions gnome-shell-extension-manager安装Gnome Shell 扩展管理器后,打开“扩展管理器”并使用搜索栏找到“锁屏背景”扩展

GxtWaitCursor:Qt下基于RAII的鼠标等待光标类

有时我们需要以阻塞的方式执行一点耗时的操作&#xff0c;这时需要主窗口光标呈现忙状态&#xff0c;GxtWaitCursor正是为此设计&#xff1b;重载的构造函数&#xff0c;可以让光标呈现忙状态一定时间后自动恢复。 GxtWaitCursor.h #pragma once#include <QObject>// // …

Unity3D实现视频和模型融合效果

系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、效果展示如下👉二、VideoPlayer播放视频(一)👉2-1、Hieraechy面板右键创建videoPlayer👉2-2、Assets面板右键创建RenderTexture👉2-3、把设置好的RenderTexture拖到videoPlayer里面还有本地视频视频�…

探索Pillow库:Python图像处理的瑞士军刀

文章目录 **探索Pillow库&#xff1a;Python图像处理的瑞士军刀**1. 背景&#xff1a;为何选择Pillow&#xff1f;2. Pillow是什么&#xff1f;3. 如何安装Pillow&#xff1f;4. 五个简单的库函数使用方法4.1 打开图像4.2 显示图像4.3 转换图像格式4.4 调整图像大小4.5 旋转图像…

HelloMeme 上手即用教程

HelloMeme是一个集成空间编织注意力的扩散模型&#xff0c;用于生成高保真图像和视频。它提供了一个代码库&#xff0c;包含实验代码和预训练模型&#xff0c;支持PyTorch和FFmpeg。用户可以通过简单的命令行操作来生成图像和视频。 本文将详细介绍&#xff0c;如何在GPU算力租…

JVM详解:JVM的系统架构

计算机语言大致可以分为两类&#xff0c;一直是编译性语言&#xff0c;典型的如C&#xff0c;他会先有编译器编译成可执行文件&#xff08;操作系统可读&#xff0c;不同的操作系统需要编译成不同的可执行文件&#xff09;&#xff0c;而另一种则是翻译性语言&#xff0c;这种语…

21. Drag-Drop拖放操作(二) - 文件、表格和树的拖放实现

本了继上节内容&#xff0c;讲述几种常用的拖放场景示例&#xff0c;包括文件、表格和树的拖放实现。 文件拖放 实现从系统目录拖放文件到App中。 自定义接收视图 自定义应用内部接收拖放的view视图类FileDragView&#xff0c;注册拖放类型&#xff0c;实现目标拖放协议NS…

力扣515:在每个树行中找最大值

给定一棵二叉树的根节点 root &#xff0c;请找出该二叉树中每一层的最大值。 示例1&#xff1a; 输入: root [1,3,2,5,3,null,9] 输出: [1,3,9]示例2&#xff1a; 输入: root [1,2,3] 输出: [1,3]提示&#xff1a; 二叉树的节点个数的范围是 [0,104]-231 < Node.val &l…