HarmonyOS实现几种常见图片点击效果

一. 样例介绍

HarmonyOS提供了常用的图片、图片帧动画播放器组件,开发者可以根据实际场景和开发需求,实现不同的界面交互效果,包括:点击阴影效果、点击切换状态、点击动画效果、点击切换动效。

相关概念

  • image组件:图片组件,用于图片资源的展示。
  • image-animator组件:帧动画播放器,用以播放一组图片,可以设置播放时间、次数等参数。
  • 通用事件:事件绑定在组件上,当组件达到事件触发条件时,会执行JS中对应的事件回调函数,实现页面UI视图和页面JS逻辑层的交互。

完整示例

gitee源码地址

二.环境搭建

我们首先需要完成HarmonyOS开发环境搭建,可参照如下步骤进行。

软件要求

硬件要求

  • 设备类型:华为手机或运行在DevEco Studio上的华为手机设备模拟器。
  • HarmonyOS系统:3.1.0 Developer Release及以上版本。

环境搭建

  1. 安装DevEco Studio,详情请参考下载和安装软件
  2. 设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境:如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作。
    1. 如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境
  3. 开发者可以参考以下链接,完成设备调试的相关配置:

三.代码结构解读

本篇Codelab只对核心代码进行讲解,对于完整代码,我们会在源码下载或gitee中提供。

├──entry/src/main/js	               // 代码区
│  └──MainAbility
│     ├──common
│     │  ├──constants
│     │  │  └──commonConstants.js     // 帧动画数据常量
│     │  └──images
│     ├──i18n		              // 中英文	
│     │  ├──en-US.json			
│     │  └──zh-CN.json			
│     └──pages
│        └──index
│           ├──index.css              // 首页样式文件	
│           ├──index.hml              // 首页布局文件
│           └──index.js               // 首页脚本文件
└──entry/src/main/resources           // 应用资源目录

四.界面布局

本示例使用卡片布局,将四种实现以四张卡片的形式呈现在主界面。每张卡片都使用图文结合的方式直观地向开发者展示所实现效果。

每张卡片对应一个div容器组件,以水平形式分为左侧文本和右侧图片两部分。左侧文本同样是一个div容器组件,以垂直形式分为操作文本与效果描述文本。右侧图片则根据需要使用image组件或image-animator组件。当前示例中,前两张卡片右侧使用的是image组件,剩余两张卡片使用的是image-animator组件。

<!-- index.hml -->
<div class="container">
    <!-- image组件的点击效果 -->
    <div class="card-container" for="item in imageCards">
        <div class="text-container">
            <text class="text-operation">{{ contentTitle }}</text>
            <text class="text-description">{{ item.description }}</text>
        </div>
        <image class="{{ item.classType }}" src="{{ item.src }}" onclick="changeHookState({{ item.eventType }})"
               ontouchstart="changeShadow({{ item.eventType }}, true)"
               ontouchend="changeShadow({{ item.eventType }}, false)"/>
    </div>
    <!-- image-animator组件的点击效果 -->
    <div class="card-container" for="item in animationCards">
        <div class="text-container">
            <text class="text-operation">{{ contentTitle }}</text>
            <text class="text-description">{{ item.description }}</text>
        </div>
        <image-animator id="{{ item.id }}" class="animator" images="{{ item.frames }}" iteration="1"
                        duration="{{ item.durationTime }}" onclick="handleStartFrame({{ item.type }})"/>
    </div>
</div>

五.事件交互

为image组件添加touchstart和touchend事件,实现点击图片改变边框阴影的效果,点击触碰结束时,恢复初始效果。

// index.js
// 点击阴影效果
changeShadow(eventType, shadowFlag) {
  if (eventType === 'click') {
    return;
  }
  if (shadowFlag) {
    this.imageCards[0].classType = 'main-img-touch';
  } else {
    this.imageCards[0].classType = 'img-normal';
  }
}

为image组件添加click事件,实现点击切换状态并变换显示图片的效果。

// index.js
// 点击切换状态
changeHookState(eventType) {
  if (eventType === 'touch') {
    return;
  }
  if (this.hook) {
    this.imageCards[1].src = '/common/images/ic_fork.png';
    this.hook = false;
  } else {
    this.imageCards[1].src = '/common/images/ic_hook.png';
    this.hook = true;
  }
}

为image-animator组件添加click事件,实现点击播放帧动画效果。

// index.js
// 点击动画效果方法
handleStartFrame(type) {
  if (type === 'dial') {
    this.animationCards[0].durationTime = CommonConstants.DURATION_TIME;
    this.$element('dialAnimation').start();
  } else {
    if (this.animationCards[1].flag) {
      this.animationCards[1].frames = this.collapse;
      this.animationCards[1].durationTime = this.durationTimeArray[0];
      this.$element('toggleAnimation').start();
      this.animationCards[1].flag = false;
      this.$element('toggleAnimation').stop();
    } else {
      this.animationCards[1].frames = this.arrow;
      this.animationCards[1].durationTime = this.durationTimeArray[1];
      this.$element('toggleAnimation').start();
      this.animationCards[1].flag = true;
      this.$element('toggleAnimation').stop();
    }
  }
}

<think>嗯,用户想用Deveco Studio开发一个外卖应用界面。首先,我得回忆一下之前学过的HarmonyOS和Deveco Studio的知识。根据引用[1],创建项目应用是通过Deveco Studio的File -> New -> Create Project开始的,所以第一步应该是指导用户新建项目。 接下来,用户需要设计UI。引用[2]提到HarmonyOS的界面使用Page Ability和Java UI,不过示例中的引用[3]和[4]展示的是使用ArkTS的声明式UI,比如@Entry和@Component结构体。可能现在更推荐用ArkTS来开发UI,所以应该引导用户用ArkTS编写界面组件。 外卖界面通常包括顶部导航、商品列表和底部导航栏。引用[3]中的ForEach循环可以用于生成商品分类或列表,用户可能需要类似的结构来展示不同的商家或菜品。比如,使用ForEach遍历商家数据,每个商家用Column或Row布局,包含图片、名称、评分等信息。 另外,引用[4]提到页面跳转,所以可能需要指导用户如何创建多个页面并使用UIAbility进行导航。比如,点击商家跳转到详情页,这需要新建Second.ets并配置路由。 还需要考虑样式和布局,比如使用Flex布局排列元素,设置背景颜色、边距等,如引用[3]中的代码示例。用户可能需要添加图片资源,所以需要说明如何将图片放入media目录并在代码中引用。 最后,测试和调试也是重要步骤,确保界面在不同设备上显示正常。可能还需要提到数据绑定,使用@State管理状态,比如购物车数量动态更新。 总结步骤应该是:新建项目、设计布局结构、使用ArkTS编写组件、处理交互逻辑、添加页面跳转、测试优化。同时,引用相关文档中的知识点,确保回答准确。</think>### 使用Deveco Studio开发外卖应用界面UI的步骤 #### 1. **创建新项目** - 打开Deveco Studio,点击`File -> New -> Create Project`,选择`Empty Ability`模板,设置项目名称(如`FoodDeliveryApp`)、保存路径和开发语言(推荐ArkTS),点击`Finish`完成创建[^1]。 #### 2. **设计页面结构** 外卖应用界面通常包含以下模块: - **顶部导航栏**:显示定位地址、搜索框 - **商品分类列表**:横向滑动展示食品分类(如快餐、饮品等) - **商家列表**:纵向滚动展示商家信息(名称、评分、配送信息等) - **底部导航栏**:首页、订单、购物车、我的 #### 3. **编写UI代码示例(以首页为例)** ```typescript @Entry @Component struct FoodDeliveryPage { @State categories: string[] = ["快餐", "饮品", "甜品", "超市", "优惠"] @State shops: Shop[] = [ { name: "肯德基", rating: 4.8, deliveryTime: "30分钟", minimumOrder: 20 }, { name: "星巴克", rating: 4.7, deliveryTime: "25分钟", minimumOrder: 35 } ] build() { Column() { // 顶部导航栏 Row() { Image($r('app.media.location_icon')).width(20).height(20) Text("北京朝阳区").fontSize(16) TextInput().placeholder("搜索商家或商品").layoutWeight(1) }.padding(10).backgroundColor(Color.White) // 分类导航 Scroll() { Row() { ForEach(this.categories, (category: string) => { Column() { Image($r('app.media.' + category + '_icon')) .width(40) .height(40) Text(category).fontSize(12) }.margin(8) }) } }.height(100) // 商家列表 List({ space: 10 }) { ForEach(this.shops, (shop: Shop) => { ListItem() { Column() { Row() { Image($r('app.media.shop_logo')).width(60).height(60) Column() { Text(shop.name).fontSize(18) Row() { Text(shop.rating.toString()).fontColor(Color.Orange) Text(`| ${shop.deliveryTime}送达 | 起送¥${shop.minimumOrder}`) } } } Divider().strokeWidth(1).color(Color.Gray) }.padding(10) } }) }.layoutWeight(1) } } } ``` #### 4. **关键实现要点** - **页面跳转**:使用`router`模块实现商家详情页跳转[^4] - **数据绑定**:通过`@State`管理动态数据(如购物车数量) - **样式优化**: - 使用`Flex布局`实现响应式设计 - 添加`阴影效果`提升视觉层次 - 设置`圆角边框`优化卡片式设计 - **资源管理**: - 将图标素材放入`resources > media`目录 - 使用`$r('app.media.icon_name')`引用资源 #### 5. **测试与调试** - 使用`Previewer`实时预览界面效果 - 在不同屏幕尺寸设备上进行适配测试 - 使用`HiLog`输出调试信息
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HarmonyOS开发者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值