【HarmonyOS】HarmonyOS NEXT学习日记:五、交互与状态管理

【HarmonyOS】HarmonyOS NEXT学习日记:五、交互与状态管理

在之前我们已经学习了页面布局相关的知识,绘制静态页面已经问题不大。那么今天来学习一下如何让页面动起来、并且结合所学完成一个代码实例。

交互

如果是为移动端开发应用,那么交互上用的最多的就是触屏事件。当然ArkUI也提供了键鼠事件、焦点事件、拖拽事件等。不过我认为用到的时候再看文档就行,事件这个东西一通百通,所以这里只介绍几个常用的事件。

onClick

点击事件是指通过手指或手写笔做出一次完整的按下和抬起动作。当发生点击事件时,会触发以下回调函数

用法:onClick(event: (event?: ClickEvent) => void)

event参数提供点击事件相对于窗口或组件的坐标位置,以及发生点击的事件源

我们写一个示例,点击按钮操作一个数字

  @State num: number = 0build() {Column({space: 10}){Text(`数字:${this.num}`)Button('数字+1').onClick(()=>{this.num++})Button('数字-1').onClick(()=>{this.num--})}.width('100%').alignItems(HorizontalAlign.Center)}

在这里插入图片描述
点击数字+1按钮则数字变大1
在这里插入图片描述

触摸事件

当手指或手写笔在组件上触碰时,会触发不同动作所对应的事件响应,包括按下(Down)、滑动(Move)、抬起(Up)事件

用法:onTouch(event: (event?: TouchEvent) => void)

  • event.type为TouchType.Down:表示手指按下。
  • event.type为TouchType.Up:表示手指抬起。
  • event.type为TouchType.Move:表示手指按住移动。
@State eventType: string = ''build() {Column({space: 10}){Text(`eventType:${this.eventType}`)Button('触摸我').onTouch((event) => {if(event) {if (event.type === TouchType.Down) {this.eventType = 'Down';}if (event.type === TouchType.Up) {this.eventType = 'Up';}if (event.type === TouchType.Move) {this.eventType = 'Move';}}})}.width('100%').alignItems(HorizontalAlign.Center)}

在这里插入图片描述
手在按钮上按下时
在这里插入图片描述
手在按钮上移动时
在这里插入图片描述
手松开按钮后
在这里插入图片描述

状态管理

但如果希望构建一个动态的、有交互的界面,就需要引入“状态”的概念。
事实上之前我们已经多次用到了这个概念,点击按钮改变一个字符串并让他展示在页面上,这个字符串就是一个状态。

即:点击交互触发了文本状态变更,状态变更引起了UI渲染

我们将写组件时用到的变量分为以下两种

  • 普通变量:只能在初始化时渲染,后续将不会再刷新。
  • 状态变量:需要装饰器装饰,改变会引起 UI 的渲染刷新 (必须设置类型 和初始值)

不论是哪种变量,只要是定义在组件内,在使用的时候,都需要通过 this 访问。


@Entry
@Component
struct Index {@State str1: string = 'str1'str2: string = 'str2'build() {Column() {Text(this.str1)Text(this.str2)}}
}

实践-购物车

结合前面学的布局知识,和今天的交互、状态管理实现一个移动端商城的购物车。可以点击商品的+、-来为购物车添加商品。

interface Commodity {img: Resource,name: string,introduce: string,oldPrice: number,price: number,num: number,
}@Entry
@Component
struct Index {@State Dog:Commodity={img: $r('app.media.test2'), // 商品图片资源name: '狗头', // 商品名称introduce: '这是一个滑稽的狗头', // 商品介绍oldPrice: 99, // 商品原价price: 9.9, // 商品现价num: 0, // 商品数量}build() {Column() {// 滚动视图Scroll(){Row(){// 商品图片Image(this.Dog.img).size({width: 120,height: 80}).borderRadius(10).margin({right: 10})// 商品信息列Column(){// 商品名称Row(){Text(this.Dog.name).fontSize(18).fontColor('#333')}// 商品介绍Row(){Text(this.Dog.introduce).fontSize(16).fontColor('#aaa').lineHeight(30)}// 商品价格与操作Row(){Text(`${this.Dog.price}`).fontSize(22).fontWeight(FontWeight.Bold).fontColor(Color.Red)Text(`${this.Dog.oldPrice}`).fontSize(18).fontColor('#999').margin({left: 10}).decoration({type: TextDecorationType.LineThrough})// 增加商品数量按钮Text('+').width(15).height(20).margin({left:30}).border({width: 1,color: '#aaa',style: BorderStyle.Solid,radius: {topLeft:3,bottomLeft:3}}).fontColor('#333').fontSize(16).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).onClick(()=>{this.Dog.num++})// 显示商品数量Text(this.Dog.num+'').height(20).border({width: 1,color: '#aaa',style: BorderStyle.Solid,}).padding({left: 5,right: 5})// 减少商品数量按钮Text('-').width(15).height(20).border({width: 1,color: '#aaa',style: BorderStyle.Solid,radius: {topRight:3,bottomRight:3}}).fontColor('#333').fontSize(16).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).onClick(()=>{if(this.Dog.num >= 1)this.Dog.num--})}}.alignItems(HorizontalAlign.Start).layoutWeight(1) // 设置列布局的权重}.alignItems(VerticalAlign.Top).width('100%').backgroundColor('#ddd').padding(20)}.backgroundColor('#eee').align(Alignment.Top).layoutWeight(1) // 设置滚动视图的布局权重// 底部结算栏Row(){Column(){// 选购数量与总价Row(){Text(`已选${this.Dog.num}}件,`).fontColor('#666')Text('合计:')Text(`${this.Dog.num * this.Dog.price}`).fontColor(Color.Red)}// 显示优惠金额Row(){Text(`共减¥${(this.Dog.oldPrice - this.Dog.price) * this.Dog.num}`).fontSize(14).lineHeight(18).fontColor(Color.Red)}}.alignItems(HorizontalAlign.End).layoutWeight(1)// 结算按钮Button('结算外卖').margin({left: 20})}.height(100).padding(20).backgroundColor(Color.White).width('100%')}}
}

在这里插入图片描述
点击加号可以添加货物
在这里插入图片描述

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

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

相关文章

自主巡航,目标射击

中国机器人及人工智能大赛 参赛经验: 自主巡航赛道 【机器人和人工智能——自主巡航赛项】动手实践篇-CSDN博客 主要逻辑代码 #!/usr/bin/env python #coding: utf-8import rospy from geometry_msgs.msg import Point import threading import actionlib impor…

鸿蒙开发 03 封装 @ohos/axios (最新深度封装)

鸿蒙开发 03 封装 ohos/axios (最新深度封装) 1、安装 ohos/axios2、开始封装2.1 新建 utils 文件夹 和 api 文件夹2.2 在 utils 文件夹里新建 http.ts2.3 在 api 文件夹里新建 api.ets 3、页面调用4、打印结果 1、安装 ohos/axios ohpm install ohos/a…

linux环境交叉编译openssl库,以使Qt支持https

一.前言 Qt若需要支持https,则需要openssl的支撑,并且要注意,Qt不同版本会指定对应的openssl版本库,比方我用的Qt5.15.10他要求用的openssl版本是1.1.1,你就不能用其他版本,不然基本就是失败报错。 如何查看Qt对应ope…

无人机反制技术常见的有哪些?

随着无人机技术的迅速发展和广泛应用,无人机在民用、军事等领域都发挥着重要作用。然而,无人机的滥用和非法入侵也带来了严重的安全隐患。为了维护国家安全和社会稳定,无人机反制技术应运而生。本文将详细介绍无人机反制技术的常见类型&#…

【Git学习 | 第2篇】在IDEA中使用Git

文章目录 在IDEA中使用Git1. IDEA中配置Git2. 获取Git仓库2.1 本地初始化仓库2.2 从远程仓库克隆 3. 本地仓库操作4. 远程仓库操作5. 分支操作 在IDEA中使用Git 1. IDEA中配置Git IDEA中使用Git,本质上使用的本地安装的Git软件配置步骤: 2. 获取Git仓库…

Unity UGUI 之 RectTransform

本文仅作学习笔记与交流,不作任何商业用途 本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正 Unity - Manual: Rect Transform 1.Rect Transform是什么 2.轴心与锚点的映射关系 首先…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【29】Sentinel

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【29】Sentinel 简介熔断降级什么是熔断什么是降级相同点不同点 整合Sentinel自定义sentinel流控返回数据使用Sentinel来保护feign远程调用自定义资源给网关整合Sentinel参考 简介 熔断降…

阿里开源的音频模型_原理与实操

英文名称: FunAudioLLM: Voice Understanding and Generation Foundation Models for Natural Interaction Between Humans and LLMs 中文名称: FunAudioLLM: 人与LLMs之间自然互动的语音理解和生成基础模型 论文地址: http://arxiv.org/abs/2407.04051v3 相关论文:…

人话讲下如何用github actions编译flutter应用-以编译windows为例

actions的脚本看下这个,有简单的说明,有关于编译个平台的脚本: https://github.com/marketplace/actions/flutter-action 打开你要编译的项目点击那个Actions按钮 然后随便点击一个脚本会跳到白框编辑界面 打开上文提到的网址随便抄下就ok …

达梦数据库(一)mysql2dm

达梦数据库(一)mysql2dm 文章目录 达梦数据库(一)mysql2dm一、安装篇ForWindows二、数据库初始化篇三、数据迁移篇出现的问题找不到对应表或者视图 注意字符集模式迁移出错大小写敏感解决方案 四、 代码修改篇group_concatGROUP BY方法一方法二(最笨)方法补充 多表联查更新参考…

1.17、基于竞争层的竞争学习(matlab)

1、基于竞争层的竞争学习简介及原理 竞争学习是一种无监督学习方法,其中的竞争层神经元之间互相竞争以学习输入模式的表示。竞争学习的一个经典模型是竞争神经网络(Competitive Neural Network,简称CNN),其核心部分是…

Linux复习02

一、什么是操作系统 操作系统是一款做软硬件管理的软件! 一个好的操作系统,衡量的指标是:稳定、快、安全 操作系统的核心工作: 通过对下管理好软硬件资源的手段,达到对上提供良好的(稳定,快…

什么是单例模式,有哪些应用?

目录 一、定义 二、应用场景 三、6种实现方式 1、懒汉式,线程不安全。 2、懒汉式,线程安全 3、双检锁/双重校验锁(DCL,即 double-checked locking) 4、静态内部类方式-------只适用于静态域 5、饿汉式 6、枚举…

嵌入式C++、STM32、树莓派4B、OpenCV、TensorFlow/Keras深度学习:基于边缘计算的实时异常行为识别

1. 项目概述 随着物联网和人工智能技术的发展,智能家居安全系统越来越受到人们的关注。本项目旨在设计并实现一套基于边缘计算的智能家居安全系统,利用STM32微控制器和树莓派等边缘设备,实时分析摄像头数据,识别异常行为(如入侵、跌倒等),并及时发出警报,提高家庭安全性。 系…

英福康INFICON RGAs for the AMAT Endura 5500 课件PPT

英福康INFICON RGAs for the AMAT Endura 5500 课件PPT

uniapp+vue3实现音乐播放器,包含上一首、下一首、暂停、播放、下载音频、下载视频、进度条拖拽、歌词等

uni-app中实现音乐播放器 1、主要利用的是uni-app中提供的uni.createInnerAudioContext()来进行实现&#xff1b; 2、代码示例 &#xff08;1&#xff09;主页面代码展示 <template><view class"songDetailContainer"><view class"bg&quo…

记录uni-app横屏项目:自定义弹出框

目录 前言&#xff1a; 正文&#xff1a; 前言&#xff1a;横屏的尺寸问题 最近使用了uniapp写了一个横屏的微信小程序和H5的项目&#xff0c;也是本人首次写的横屏项目&#xff0c;多少是有点踩坑不太适应。。。 先说最让我一脸懵的点&#xff0c;尺寸大小&#xff0c;下面一…

vxe-弹窗初始化激活选中Vxe-Table表格中第一行input输入框

1.实现效果 2.Modal弹窗的渲染过程 一、Vue组件的生命周期 Vue组件从创建到销毁会经历一系列的生命周期钩子&#xff0c;这些钩子为开发者提供了在不同阶段插入自定义逻辑的机会。在Modal弹窗的上下文中&#xff0c;这些生命周期钩子同样适用。 beforeCreate&#xff1a;组件…

Qt中的高分辨率及缩放处理

写在前面 使用Qt开发界面客户端&#xff0c;需要考虑不同分辨率及缩放对UI界面的影响&#xff0c;否则会影响整体的交互使用。 问题 高分辨率/缩放设备上图片/图标模糊 若不考虑高分辨及缩放处理&#xff0c;在高分辨率/缩放设备上&#xff0c;软件中的图片、图标可能会出现…

解决jupyter argparse报错

jupyter argparse报错 文章目录 一、jupyter argparse报错 一、jupyter argparse报错 args parser.parse_args()这行代码改为&#xff1a; args parser.parse_args(args[])完整的代码为&#xff1a; import argparseparser argparse.ArgumentParser() parser.add_argumen…