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

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

可以参考如下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%')
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
如何吸取一张图片
429浏览 • 1回复 待解决
List组件如何设置两端渐变效果
1971浏览 • 1回复 待解决
HarmonyOS Text两端对齐未实现
374浏览 • 1回复 待解决
如何一张图片转化为PixelMapElement
10040浏览 • 1回复 待解决
HarmonyOS 获取手机最新一张图片
31浏览 • 1回复 待解决
如何在list组件中实现两端渐变
471浏览 • 1回复 待解决
Text如何实现文本段落两端对齐?
462浏览 • 1回复 待解决
HarmonyOS 多张画布横向合成一张图片
31浏览 • 1回复 待解决
如何保存一张PNG图片到相册中
1876浏览 • 1回复 待解决
HarmonyOS web与H5两端数据交互
924浏览 • 1回复 待解决