HarmonyOS鸿蒙实战（ Beta6版）基于ArkUI实现应用聊天界面拉伸能力实践方案

场景描述

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

效果图

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

方案描述

分别使用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)
    .height(this.h)
    .borderRadius(4)
    .resizable({
      slice: {
        top: this.top,
        bottom: this.bottom,
        left: this.left,
        right: this.right
      }
    })
    .objectFit(this.fit)
  Divider().strokeWidth(1).color(Color.Red)
    .position({ top: this.top })
  Divider().strokeWidth(1).color(Color.Yellow)
    .position({ bottom: this.bottom })
  Divider().strokeWidth(1).color(Color.Blue).vertical(true)
    .position({ left: this.left })
  Divider().strokeWidth(1).color(Color.Green).vertical(true)
    .position({ right: this.right })
}
.width(this.w)
.height(this.h)

详细方案

1.给Text设置背景图并将backgroundImageSize宽高都设置为100%，再使用backgroundImageResizable限定背景图拉伸区域。

2.使用Stack组件嵌套Image和Text，在Text组件onAreaChange事件中将宽高值给到Image。

核心代码

List({ space: 10 }) {
  ForEach(this.leftData, (item: string) => {
    ListItem() {
      Text(item)
        .padding({
          top: 10,
          bottom: 10,
          left: 10,
          right: 20
        })
        .backgroundImage($r('app.media.bubble3'))
        .backgroundImageSize({
          width: '100%',
          height: '100%'
        })
        .backgroundImageResizable({
          slice: {
            top: 30,
            bottom: 16,
            left: 16,
            right: 24
          }
        })
    }
  }, (item: string) => item)
}
.width('50%')
.height('100%')
.alignListItem(ListItemAlign.End)
......
Stack() {
  Image($r('app.media.bubble3'))
    .width(this.item.textWidth)
    .height(this.item.textHeight)
    .resizable({
      slice: {
        top: 30,
        bottom: 16,
        left: 16,
        right: 24
      }
    })
  Text(this.item.content)
    .padding({
      top: 10,
      bottom: 10,
      left: 10,
      right: 20
    })
    .onAreaChange((_oldValue: Area, newValue: Area) => {
      this.item.textWidth = newValue.width as number
      this.item.textHeight = newValue.height as number
    })
}

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。 

为了确保高效学习，建议规划清晰的学习路线

GitCode - 全球开发者的开源社区,开源代码托管平台 希望这一份鸿蒙学习文档能够给大家带来帮助~

---

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

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.学习视频+学习PDF文档

HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

​​

 纯血版鸿蒙全套学习文档（面试、文档、全套视频等）

                   

​​​​鸿蒙APP开发必备

​​

总结

【纯血版鸿蒙全套最新学习文档】

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。