场景描述
应用聊天界面简单气泡的拉伸实现。
效果图
最上方是未被拉伸的气泡图效果。
方案描述
分别使用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
})
}
最后
小编在之前的鸿蒙系统扫盲中,有很多朋友给我留言,不同的角度的问了一些问题,我明显感觉到一点,那就是许多人参与鸿蒙开发,但是又不知道从哪里下手,因为资料太多,太杂,教授的人也多,无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)文档用来跟着学习是非常有必要的。
为了确保高效学习,建议规划清晰的学习路线
GitCode - 全球开发者的开源社区,开源代码托管平台 希望这一份鸿蒙学习文档能够给大家带来帮助~
鸿蒙(HarmonyOS NEXT)最新学习路线
该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发,不仅补充了华为官网未涉及的解决方案
路线图适合人群:
IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术
2.学习视频+学习PDF文档
HarmonyOS Next 最新全套视频教程 (鸿蒙语法ArkTS、TypeScript、ArkUI教程……)
纯血版鸿蒙全套学习文档(面试、文档、全套视频等)
鸿蒙APP开发必备
总结
总的来说,华为鸿蒙不再兼容安卓,对程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,才能在这个变革的时代中立于不败之地。