场景描述
应用聊天界面简单气泡的拉伸实现。
效果图
最上方是未被拉伸的气泡图效果。
方案描述
分别使用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
})
}
以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解;想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到!
下面是鸿蒙的完整学习路线,展示如下:
除此之外,根据这个学习鸿蒙全栈学习路线,也附带一整套完整的学习【文档+视频】,内容包含如下:
内容包含了:(ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战)等技术知识点。帮助大家在学习鸿蒙路上快速成长!
鸿蒙【北向应用开发+南向系统层开发】文档
鸿蒙【基础+实战项目】视频
鸿蒙面经
为了避免大家在学习过程中产生更多的时间成本,对比我把以上内容全部放在了↓↓↓想要的可以自拿喔!谢谢大家观看!