首页 > 极客资料 博客日记
鸿蒙Banner图一多适配不同屏幕
2024-11-04 17:30:04极客资料围观18次
这篇文章介绍了鸿蒙Banner图一多适配不同屏幕,分享给大家做个参考,收藏极客之家收获更多编程知识
认识一多
随着终端设备形态日益多样化,分布式技术逐渐打破单一硬件边界,一个应用或服务,可以在不同的硬件设备之间随意调用、互助共享,让用户享受无缝的全场景体验。而作为应用开发者,广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容,则需要适配不同的屏幕尺寸和硬件,开发成本较高。HarmonyOS系统面向多终端提供了“一次开发,多端部署”(后文中简称为“一多”)的能力,让开发者可以基于一种设计,高效构建多端可运行的应用。
“一多”建议从最初的设计阶段开始就拉通多设备综合考虑。考虑实际智能终端设备种类繁多,设计师无法针对每种具体设备各自出一份UX设计图。“一多”建议从设备屏幕宽度的维度,将设备划分为六大类。设计师只需要针对这六大类设备做设计,而无需关心具体的设备形态。
Banner图一多适配
我们在使用Banner图时,会发现在中大屏设备上,Banner的宽度太大,当我们将高度固定时,在大屏设备上,高度又太小,图片裁剪严重。若宽高采用比例设置,高度又太大,在不同的屏幕上要么太小或太大,显示效果都不是很理想。
Banner有一个属性displayCount,用来控制一屏显示多少个组件,我们在小屏设备上显示一张图片,在中大屏设备上一屏显示2张图片。再使用aspectRatio设置合适的宽高比,就能达到我们想要的效果了。
我们现在只需要判断设备是小屏还是中大屏就可以了,这里借助GridRow栅格组件的断点能力,针对小屏和非小屏设备,设置不同的displayCount和aspectRatio就可以了,实现小源码如下。
@ComponentV2
struct Index {
@Local breakPoint: string = 'unknown'
@Local images: string[] = []
@Computed
get isSm(): boolean {
return this.breakPoint === 'sm'
}
build() {
Column() {
GridRow({
columns: 1,
breakpoints: { reference: BreakpointsReference.WindowSize }
}) {
GridCol() {
Swiper() {
Repeat(this.images).each((data: Readonly<RepeatItem<string>>) => {
Image(data.item)
}).key((item) => item)
}
.width('100%')
.height('100%')
.loop(false)
.duration(1000)
.autoPlay(false)
.indicatorInteractive(true)
.itemSpace(this.isSm ? 0 : 32)
.displayCount(this.isSm ? 1 : 2)
.indicator(new DotIndicator().itemWidth(8)
.itemHeight(8)
.selectedItemWidth(12)
.selectedItemHeight(8)
.color($r('app.color.divider_color'))
.selectedColor($r('app.color.brand_color')))
}
}.width('100%').aspectRatio(this.isSm ? 2.5 : 4.5).onBreakpointChange((point) => {
this.breakPoint = point
})
}.width('100%').justifyContent(FlexAlign.Start)
}
}
在不同设备的显示效果如下。
版权声明:本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!
标签:
相关文章
最新发布
- Nuxt.js 应用中的 prerender:routes 事件钩子详解
- 【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
- 六、Spring Boot集成Spring Security之前后分离认证流程最佳方案
- 《JVM第7课》堆区
- .NET 8 高性能跨平台图像处理库 ImageSharp
- 还在为慢速数据传输苦恼?Linux 零拷贝技术来帮你!
- 刚毕业,去做边缘业务,还有救吗?
- 如何避免 HttpClient 丢失请求头:通过 HttpRequestMessage 解决并优化
- 让性能提升56%的Vue3.5响应式重构之“版本计数”