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

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


HarmonyOS
2024-07-25 10:16:41
浏览
已于2024-7-25 18:36:21修改
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
morning_dxm

场景描述

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

效果图

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

方案描述

分别使用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 
    }) 
}
分享
微博
QQ
微信
回复
2024-07-25 18:27:02
相关问题
如何实现类似.9 功能
1249浏览 • 1回复 待解决
HarmonyOS 是否支持类似的.9配置?
241浏览 • 1回复 待解决
基于原生能力实现图文混排
448浏览 • 1回复 待解决
基于TLSSocket通信能力
433浏览 • 1回复 待解决
基于原生能力组件封装
398浏览 • 1回复 待解决
基于原生水印添加能力
742浏览 • 1回复 待解决
请问有没有支持.9方案?
205浏览 • 1回复 待解决
HarmonyOS 支持使用.9吗?
393浏览 • 1回复 待解决
基于原生能力网络状态感知
502浏览 • 1回复 待解决
基于@ohos/axios网络请求能力
469浏览 • 1回复 待解决
基于原生能力跨应用跳转
796浏览 • 1回复 待解决
HarmonyOS有没有适配点9方案
1850浏览 • 1回复 待解决
基于原生能力网络加载性能分析
722浏览 • 1回复 待解决