HarmonyOS 鸿蒙Next支持类似Android的 .9图片吗?

【背景知识】

Image是图片组件，常用于在应用中显示图片。Image组件提供与点九图相同功能的API设置，通过设置resizable属性来配置ResizableOptions，即图像拉伸时的大小调整选项。ResizableOptions的参数slice包含top、left、bottom和right四个属性，分别表示图片在上下左右四个方向拉伸时保持不变的距离。

【解决方案】

• 通过调整Image中的width和height来将文字放到想要的图片中的位置，通过resizable属性，设置ResizableOptions参数，设置拉伸时上下左右距离一致，实现.9图。 代码如下：

import { MeasureText } from '@kit.ArkUI'

@Component
export struct CommonStyle {
  @Prop text: string = '';
  @State left: number = 10;
  @State right: number = 10;
  @State top: number = 10;
  @State bottom: number = 10;
  @State line: number = 2;
  @State textSize: SizeOptions = MeasureText.measureTextSize({ textContent: this.text });

  build() {
    Stack() {
      Image($r("app.media.11"))
        .width(px2vp(Number(`${this.textSize.width}`)) < 350 ? 60 + px2vp(Number(`${this.textSize.width}`)) : 380)
        .height(this.text.length < 40 ? 50 + px2vp(Number(`${this.textSize.height}`)) :
          50 + (px2vp(Number(`${this.textSize.height}`)) * this.line))
        .resizable({
          slice: {
            top: this.top,
            left: this.left,
            bottom: this.bottom,
            right: this.right
          }
        })
      Text(this.text)
        .fontColor(Color.White)
    }
    .width(350)
    .height(200)
  }
}

@Entry
@Component
struct ChatBubbleStretchDemo {
  build() {
    Column() {
      CommonStyle({ text: '一行文字' })
      CommonStyle({ text: '两行文字两行文字两行文字两行文字两行文字两行文字' })
      CommonStyle({
        text: '多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字多行文字'
      })
    }
    .backgroundColor(Color.White)
    .height('100%')
    .width('100%')
  }
}