HarmonyOS实战开发-边框或背景图片拉伸案例

567 篇文章 2 订阅
555 篇文章 0 订阅

介绍

HarmonyOS上不支持.9资源文件进行安全拉伸。 作为替代方案,本案例中商城页面的促销标签边框使用同一张图片资源,通过设置图片的resizable属性,展示不同长度的促销标签效果。

效果图预览

使用说明

使用说明

  1. 打开案例即可直接查看效果。
  2. 每一个商品的促销标签都使用同一张本地资源图片,不同长度的文案对应不同的图片拉伸比例。

实现思路

1.通过设置图片组件的resizable属性实现图片的安全拉伸。

Image($r('app.media.ninepatchimage_border'))
  .width(this.discountTextWidth)
  .height(this.discountTextHeight)
    // TODO: 知识点:通过设置图片组件的resizable属性,设置顶部、右侧、底部、左侧的距离,使其边缘部分在图片拉伸时不会发生变化,仅图片中央区域被拉伸
  .resizable({
    slice: {
      top: $r('app.integer.ninepatchimage_product_discount_image_resizable_top'),
      right: $r('app.integer.ninepatchimage_product_discount_image_resizable_right'),
      bottom: $r('app.integer.ninepatchimage_product_discount_image_resizable_bottom'),
      left: $r('app.integer.ninepatchimage_product_discount_image_resizable_left')
    }
  })

2.依赖onAreaChange事件,观察促销标签文案所在Text组件的宽高变化,通过状态绑定的形式,动态修改促销标签边框底图的宽高。

Text(discount)
  .fontSize($r('app.integer.ninepatchimage_product_discount_font_size'))
  .fontColor(Color.Red)
    // TODO: 知识点:通过监听文本组件的宽高,以及状态变量,动态设置背景图片的宽高
  .onAreaChange((oldValue: Area, newValue: Area) => {
    this.discountTextWidth = newValue.width;
    this.discountTextHeight = newValue.height;
  })
  .padding({
    left: $r('app.integer.ninepatchimage_product_discount_padding'),
    right: $r('app.integer.ninepatchimage_product_discount_padding')
  })

高性能知识点

1.WaterFlow组件下使用LazyForEach、组件复用,从而提升瀑布流列表首次渲染和滚动时的性能。

WaterFlow() {
  LazyForEach(this.productsDataSource, (item: Product) => {
    FlowItem() {
      // TODO:性能知识点:使用@Reusable修饰可复用的组件,并通过设置reuseId提供瀑布流滑动场景中的组件复用能力
      ProductItemComp({
        product: item
      })
        .reuseId(item.type)
    }
    .width('100%')
  })
}
@Reusable
@Component
export struct ProductItemComp {
  ...
}

2.通过onAreaChange事件监听文本组件宽高的变化,设置背景图片的宽高,然而onAreaChange为系统高频回调,每一帧都会执行,应避免在其中进行冗余和耗时的操作。

Text(discount)
    .fontSize($r('app.integer.imageresizable_product_discount_font_size'))
    .fontColor(Color.Red)
    // TODO: 知识点:通过监听文本组件的宽高,以及状态变量,动态设置背景图片的宽高
    // TODO: 性能知识点:onAreaChange为系统高频回调,每一帧都会执行,应避免在其中进行冗余和耗时的操作
    .onAreaChange((oldValue: Area, newValue: Area) => {
      this.discountTextWidth = newValue.width;
      this.discountTextHeight = newValue.height;
    })

工程结构&模块类型

ninepatchimage                       // har类型
|---common
|   |---constants
|   |    |---CommonConstants.ets     // 通用常量
|---components
|   |---ProductItemComp.ets          // 自定义组件-商品简易信息
|---model
|   |---ProductModel.ets             // 模型层-商品数据模型
|---pages
|   |---ProductWaterFlowPage.ets     // 展示层-商品瀑布流页面

模块依赖

  • 路由模块

如果大家还没有掌握鸿蒙,现在想要在最短的时间里吃透它,我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI、相关教学视频》以及《鸿蒙生态应用开发白皮书V2.0PDF》《鸿蒙开发学习手册》(共计890页)鸿蒙开发资料等…希望对大家有所帮助:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF:https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

在这里插入图片描述

南北双向高工技能基础:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

应用开发中高级就业技术:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

全网首发-工业级 南向设备开发就业技术:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》:

如何快速入门:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

在这里插入图片描述

开发基础知识:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

在这里插入图片描述

基于ArkTS 开发:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值