「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目

news2024/11/25 2:41:56

本篇将带领你实现一个互动性十足的灯光控制小项目,用户可以通过点击按钮来控制灯光的开关。该项目将涉及状态管理、动态图片加载以及按钮交互,是学习鸿蒙应用开发的重要基础。

在这里插入图片描述


关键词
  • UI互动应用
  • 状态管理
  • 动态图片加载
  • 用户交互

一、功能说明

在这个灯光控制应用中,用户可以通过点击“开灯”或“关灯”按钮来切换灯光状态。应用会根据用户的操作动态显示不同的灯光图片。我们将使用动态路径加载图像,并结合按钮交互来完成这一功能。


二、所需组件
  • @Entry@Component 装饰器
  • ColumnRow 布局组件
  • Image 组件用于展示不同状态的图片
  • Button 组件用于用户交互
项目结构
  • 项目名称LightControlApp
  • 自定义组件名称LightPage
  • 代码文件LightPage.etsIndex.ets

三、代码实现
// LightPage.ets
@Component
export struct LightPage {
  @State isOn: boolean = false; // 控制灯光状态
  @State imageIndex: number = 1; // 控制加载图片的索引

  build() {
    Column({ space: 20 }) {
      // 动态加载图片,根据状态显示不同灯光图片
      Image(this.isOn ? $r(`app.media.light_on_${this.imageIndex + 1}`) : $r(`app.media.light_off`))
        .height(300)
        .width(300)
        .borderRadius(20);

      // 提供按钮交互
      Row({ space: 50 }) {
        Button('关灯')
          .onClick(() => {
            this.isOn = false; // 切换状态为关灯
            this.imageIndex = Math.floor(Math.random() * 6) + 1; // 随机更换图片索引
          });

        Button('开灯')
          .onClick(() => {
            this.isOn = true; // 切换状态为开灯
            this.imageIndex = Math.floor(Math.random() * 6) + 1; // 随机更换图片索引
          });
      }
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center); // 布局居中显示
  }
}
// Index.ets
import { LightPage } from './LightPage'

@Entry
@Component
struct Index {
  build() {
    Column() {
      LightPage() // 调用自定义组件
    }
    .padding(20) // 设置页面内边距
  }
}

效果示例:点击“开灯”或“关灯”按钮时,页面会动态加载随机灯光图片,增强用户体验。
在这里插入图片描述


四、代码解读
  • Image()
    根据 isOn 状态选择加载“开灯”或“关灯”图片,通过 imageIndex 实现随机图片的选择。

  • Math.floor(Math.random() * 6) + 1
    生成 1 到 6 的随机整数,确保每次点击按钮时加载不同的图片,提升用户体验。

  • @State 修饰符
    用于管理组件内的状态,确保 UI 根据状态变化进行重新渲染。


五、相关知识点
  • 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解
  • 「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用

小结

本篇教程通过实现灯光控制小项目,让你深入理解了如何利用鸿蒙框架进行状态管理和实现动态图片加载。掌握了这些技巧后,你可以轻松地创建更多的互动性应用。


下一篇预告

在下一篇「UI互动应用篇2」中,我们将探讨如何实现一个计时器应用,学习更多的时间控制与动态 UI 更新的实现方法。


上一篇:「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
下一篇:「Mac畅玩鸿蒙与硬件25」UI互动应用篇2 - 计时器应用实现

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

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

相关文章

雷池社区版 7.1.0 LTS 发布了

LTS(Long Term Support,长期支持版本)是软件开发中的一个概念,表示该版本将获得较长时间的支持和更新,通常包含稳定性、性能改进和安全修复,但不包含频繁的新特性更新。 作为最受欢迎的社区waf&#xff0c…

七.numpy模块

NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库。 NumPy 的前身 Numeric 最早是由 Jim Hugunin 与其它协作者共同开发,2005 年,Travis Oliphant…

RK3568平台开发系列讲解(内存篇)Linux 内存优化

🚀返回专栏总目录 文章目录 一、如何正确采集 Linux 内存可用空间二、系统内存优化参考步骤2.1、优化 Linux Kernel module 所占用的内存空间2.3、将 Wi-Fi built-in kernel2.4、优化 Linux 文件系统所占用的内存空间2.5、上层优化2.6、客户定制优化2.6.1、对具体客户的具体产…

Caffeine 手动策略缓存 put() 方法源码解析

BoundedLocalManualCache put() 方法源码解析 先看一下BoundedLocalManualCache的类图 com.github.benmanes.caffeine.cache.BoundedLocalCache中定义的BoundedLocalManualCache静态内部类。 static class BoundedLocalManualCache<K, V> implements LocalManualCache&…

猎板PCB2到10层数的科技进阶与应用解析

1. 单层板&#xff08;Single-sided PCB&#xff09; 定义&#xff1a;单层板是最基本的PCB类型&#xff0c;导线只出现在其中一面&#xff0c;因此被称为单面板。限制&#xff1a;由于只有一面可以布线&#xff0c;设计线路上有许多限制&#xff0c;不适合复杂电路。应用&…

Dinky中配置Flink集群

需要启动yarn-session 进程&#xff0c;在集群服务器 cd /pwd//flink/bin yarn-session -d 启动成功后可以在yarn的资源管理队列进行查看 启动成功后会给出&#xff1a;JobManager Web Interface 在dinky中进行配置&#xff1a; 集群配置 Hadoop 配置&#xff1a; H…

asp.net+uniapp养老助餐管理系统 微信小程序

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 以往流浪猫狗的救助网站相关信息的管理&#xff0c;都是工作人员手工统计。这种方式不但时效性低&#xff0c;而且需要查…

《Ooga》进不去游戏解决方法

Ooga如果遇到进不去游戏的情况&#xff0c;玩家可以采取很多种方法进行解决&#xff0c;其中包括检查设备配置与网络连接&#xff0c;验证游戏文件完整性以及清理游戏缓存。 Ooga进不去游戏怎么办 检查设备配置 确保电脑的配置达到了游戏的最低要求&#xff0c;如果配置不足&…

Kubernetes——part8-2 k8s集群存储解决方案 GlusterFS

一、存储解决方案介绍 1.1 GlusterFS GlusterFS是一个开源的分布式文件系统具有强大的横向扩展能力通过扩展能够支持数PB存储容量和处理数千客户端GlusterFS借助TCP/IP或InfiniBandRDMA网络将物理分布的存储资源聚集在一起&#xff0c;使用单一全局命名空间来管理数据。 1.2…

Kafka 之顺序消息

前言&#xff1a; 在分布式消息系统中&#xff0c;消息的顺序性是一个重要的问题&#xff0c;也是一个常见的业务场景&#xff0c;那 Kafka 作为一个高性能的分布式消息中间件&#xff0c;又是如何实现顺序消息的呢&#xff1f;本篇我们将对 Kafka 的顺序消息展开讨论。 Kafk…

js WebAPI黑马笔记(万字速通)

此笔记来自于黑马程序员&#xff0c;pink老师yyds 复习&#xff1a; splice() 方法用于添加或删除数组中的元素。 注意&#xff1a; 这种方法会改变原始数组。 删除数组&#xff1a; splice(起始位置&#xff0c; 删除的个数) 比如&#xff1a;1 let arr [red, green, b…

C 学习(5)

哈哈哈哈哈&#xff0c;终于想起来了&#xff01;贴一下主要的参考&#xff1a; 基本语法 - 《阮一峰《C 语言教程》》 - 书栈网 BookStack 内容写的比较浅显有疏漏&#xff0c;如果看不明白&#xff0c;再结合一下百度。 注释 C 语言的注释有两种表示方法。 第一种方法是…

redis7学习笔记

文章目录 1. 简介1.1 功能介绍1.1.1 分布式缓存1.1.2 内存存储和持久化(RDBAOF)1.1.3 高可用架构搭配1.1.4 缓存穿透、击穿、雪崩1.1.5 分布式锁1.1.6 队列 1.2 数据类型StringListHashSetZSetGEOHyperLogLogBitmapBitfieldStream 2. 命令2.1 通用命令copydeldumpexistsexpire …

【设计模式系列】建造者模式(十)

目录 一、什么是建造者模式 二、建造者模式的角色 三、建造者模式的典型应用 四、建造者模式在StringBuilder中的应用 五、典型建造者模式的案例 一、什么是建造者模式 建造者模式&#xff08;Builder Pattern&#xff09;是一种创建型设计模式&#xff0c;用于构建复杂对…

用vite创建项目

一. vite vue2 1. 全局安装 create-vite npm install -g create-vite 2. 创建项目 进入你想要创建项目的文件夹下 打开 CMD 用 JavaScript create-vite my-vue2-project --template vue 若用 TypeScript 则 create-vite my-vue2-project --template vue-ts 这里的 …

JVM结构图

JVM&#xff08;Java虚拟机&#xff09;是Java编程语言的核心组件之一&#xff0c;负责将Java字节码翻译成机器码并执行。JVM由多个子系统组成&#xff0c;包括类加载子系统、运行时数据区、执行引擎、Java本地接口和本地方法库。 类加载子系统&#xff08;Class Loading Subsy…

WordPress伪静态设置

为什么要设置WordPress伪静态&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;中&#xff0c;静态URL通常被认为更易于搜索引擎爬虫抓取和索引&#xff0c;有助于提高网站的搜索引擎排名。 WordPress伪静态设置方法主要依赖于服务器环境&#xff0c;以下是针对不同服务器…

【黑盒测试】等价类划分法及实例

本文主要介绍黑盒测试之等价类划分法&#xff0c;如什么是等价类划分法&#xff0c;以及如何划分&#xff0c;设计等价类表。以及关于三角形案例的等价类划分法。 文章目录 一、什么是等价类划分法 二、划分等价类和列出等价类表 三、确定等价类的原则 四、建立等价类表 …

宠物领养救助管理软件有哪些功能 佳易王宠物领养救助管理系统使用操作教程

一、概述 佳易王宠物领养救助管理系统V16.0&#xff0c;集宠物信息登记、查询&#xff0c;宠物领养登记、查询&#xff0c; 宠物领养预约管理、货品进出库库存管理于一体的综合管理系统软件。 概述&#xff1a; 佳易王宠物领养救助管理系统V16.0&#xff0c;集宠物信息登记…

RK3568开发板静态IP地址配置

1. 连接SSH MYD-LR3568 开发板设置了静态 eth0:1 192.168.0.10 和 eth1:1 192.168.1.10&#xff0c;在没有串口时调试开发板&#xff0c;可以用工具 SSH 登陆到开发板。 首先需要用一根网线直连电脑和开发板&#xff0c;或者通过路由器连接到开发板&#xff0c;将电脑 IP 手动设…