HarmonyOS 给定一张图片，保留左右两端区域，只想拉伸中间部分，如何设置resizable的属性值？

Question

如题：HarmonyOS 给定一张图片，保留左右两端区域，只想拉伸中间部分，如何设置resizable的属性值？

Answer 1

可以参考如下demo设置，改变图片的宽度即可

@Entry
@Component
struct Index {
  @State left: number = 7
  @State right: number = 7;
  @State top: number = 2;
  @State bottom: number = 2;
  @State w: number = 300
  @State h: number = 200
  build() {
    Column({ space: 20 }) {
      Image($r('app.media.123'))// 引入图片路径
        .resizable({
          slice: {
            top: `${this.top}px`,
            left: `${this.left}px`,
            bottom: `${this.bottom}px`,
            right: `${this.right}px`,
          }
        })
        .width(`${this.w}px`)
        .height(`${this.h}px`)
      Blank().height(80)

        .height(`${this.h}px`)
      Row() {
        Button("add top to " + this.top).fontSize(10)
          .onClick(() => {
            this.top += 5
          })
        Button("add bottom " + this.bottom).fontSize(10)
          .onClick(() => {
            this.bottom += 5
          })
        Button("add left " + this.left).fontSize(10)
          .onClick(() => {
            this.left += 5
          })
        Button("add right " + this.right).fontSize(10)
          .onClick(() => {
            this.right += 5
          })
      }
      Row() {
        Button("reduce top to " + this.top).fontSize(10)
          .onClick(() => {
            this.top -= 5
          })
        Button("reduce bottom " + this.bottom).fontSize(10)
          .onClick(() => {
            this.bottom -= 5
          })
        Button("reduce left " + this.left).fontSize(10)
          .onClick(() => {
            this.left -= 5
          })
        Button("reduce right " + this.right).fontSize(10)
          .onClick(() => {
            this.right -= 5
          })
      }
      Row() {
        Button("add w").fontSize(10)
          .onClick(() => {
            this.w += 10
          })
        Button("add h").fontSize(10)
          .onClick(() => {
            this.h += 10
          })
      }
    }
    .backgroundColor(Color.Orange)
    .width('100%').height('100%')
  }
}