【鸿蒙实战开发】基于ArkUI实现类似.9图的拉伸能力

场景描述

应用聊天界面简单气泡的拉伸实现。

效果图

最上方是未被拉伸的气泡图效果。

方案描述

分别使用backgroundImageResizable和resizable实现聊天气泡的拉伸。

backgroundImageResizable和resizable使用详解。

文档提供的图片，在设置了top、right、bottom、left四个参数后，图上的4角也就是1234区域不会被拉伸，关键点在于这4个参数的大小必须是原图的基础上的大小，所以需要将原图像素值转为vp后，在此基础上来确认参数。

效果图

核心代码

// bubble3 宽472px高200px 
@State w: number = px2vp(472) 
@State h: number = px2vp(200) 
...... 
Stack() { 
  Image($r('app.media.bubble3')) 
    .width(this.w)