HarmonyOS NEXT 边框或背景图片拉伸案例

最新推荐文章于 2024-09-26 14:24:11 发布

蜀道山QAQ

最新推荐文章于 2024-09-26 14:24:11 发布

阅读量1.2k

点赞数 22

分类专栏：鸿蒙文章标签： harmonyos 华为 android 鸿蒙 OpenHarmony

本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/138924739

版权

鸿蒙专栏收录该内容

631 篇文章 86 订阅

订阅专栏

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

效果图预览

使用说明

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

实现思路

通过设置图片组件的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')
    }
  })

依赖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')
  })

高性能知识点

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 {
  ...
}

通过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     // 展示层-商品瀑布流页面

模块依赖

路由模块

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料