基于ArkUI实现类似.9图的拉伸能力

// 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)

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 
    }) 
}