`
龙儿筝
  • 浏览: 10097 次
社区版块
存档分类
最新评论

鸿蒙Banner图一多适配不同屏幕

阅读更多

认识一多

随着终端设备形态日益多样化,分布式技术逐渐打破单一硬件边界,一个应用或服务,可以在不同的硬件设备之间随意调用、互助共享,让用户享受无缝的全场景体验。而作为应用开发者,广泛的设备类型也能为应用带来广大的潜在用户群体。但是如果一个应用需要在多个设备上提供同样的内容,则需要适配不同的屏幕尺寸和硬件,开发成本较高。HarmonyOS系统面向多终端提供了“一次开发,多端部署”(后文中简称为“一多”)的能力,让开发者可以基于一种设计,高效构建多端可运行的应用。

img

“一多”建议从最初的设计阶段开始就拉通多设备综合考虑。考虑实际智能终端设备种类繁多,设计师无法针对每种具体设备各自出一份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)
  }
}
0
0
分享到:
评论

相关推荐

    鸿蒙轮播图banner.7z

    在鸿蒙OS(HarmonyOs)开发中,创建一个轮播图Banner是常见的需求,用于展示广告、推荐内容等。本教程将详细讲解如何在鸿蒙系统中实现一个简单的轮播图组件,以便用户能够流畅地浏览并切换不同的图片或内容。 首先...

    使用swiper插件,实现轮播效果,banner自适应各种屏幕和手机大小

    Swiper是一款广泛应用于网页开发中的JavaScript轮播组件,尤其在响应式设计中,它能确保 banner 能够自适应各种屏幕尺寸,无论是桌面还是移动设备,都能呈现出良好的展示效果。Swiper 的强大之处在于它的灵活性和...

    做网站经常用到的导航Banner图片 网站导航图片 banner图片

    3. **多样性**:文件名称列表中包含了多个不同的图片,这表明这些Banner图片风格多样,适用于不同的网站主题和设计需求。设计师可以根据网站的整体风格和内容选择最合适的图片。 4. **格式多样性**:文件名中既有....

    Android自定义Banner控件,完美适配

    自定义的banner控件,直接使用,完美适配所有场景,activity和fragment都没问题。

    样式齐全的banner图

    在Android应用开发中,Banner图通常用于展示广告或者吸引用户注意力的重要信息,它是一个轮播图组件,可以自动或手动切换不同的图片。本项目“样式齐全的banner图”提供了一个功能丰富的广告图片轮播控件,它具有...

    图片banner宽度自适应浏览器

    “仿新影网首页全屏banner效果展示”是指模仿新影网的首页设计,实现一个全屏的图片Banner,这通常包括一张或多张大图轮播,与网站主题紧密结合,为用户提供引人入胜的视觉体验。 要实现图片Banner宽度自适应,我们...

    banner图片自动切换

    在网页设计中,"Banner图片自动切换"是一个常见的功能,用于吸引用户的注意力并展示多样化的内容。这个功能在网站、应用程序和数字广告中广泛使用。它通常由一组轮播的图片或图形组成,随着时间的推移或者用户交互而...

    一屏三页无限轮播Banner-master.zip

    然而,"一屏三页"的创新在于,它将三个不同的Banner内容整合到同一屏幕空间内,每个页面之间可以平滑过渡,为用户提供更丰富的信息展示,同时保持页面的整洁性。这种设计方式常见于电商、新闻资讯或者产品介绍等网站...

    Banner图片过渡效果.rar

    图片相册是一种常见的网页元素,它允许用户浏览一系列相关图片,而Banner图片过渡效果则可以被应用到这样的相册中,为用户提供动态的浏览体验。过渡效果可以是淡入淡出、滑动、缩放等多种形式,每种方式都有其独特的...

    600张精美banner图片

    5. **响应式设计**:考虑到现代网页和应用的多设备兼容性, banner图片应具备响应式,能在不同分辨率和屏幕尺寸下正常显示。 6. **版权问题**:在使用这些图片时,一定要注意版权问题。确保你有权使用这些资源,...

    flash图片特效制作banner焦点图片3D立体展示效果

    本教程将探讨如何使用Flash制作一款3D立体展示效果的图片焦点Banner,这是一款集图片特效、图片插件和3D视觉效果于一体的动态展示工具。 首先,让我们分析“标题”:“flash图片特效制作banner焦点图片3D立体展示...

    3d 立体banner图片

    首先,3D立体Banner图片的制作涉及到3D建模、渲染和后期合成等多个步骤。3D建模是创建三维物体的基础,设计师通常会使用如Blender、3ds Max或Maya等专业软件来构建模型。这些软件提供了丰富的工具和功能,让设计师...

    jQuery背景和banner图片一起切换全屏焦点图切换代码

    本示例中的"jQuery背景和banner图片一起切换全屏焦点图切换代码"是利用jQuery实现的一种交互式用户体验,它允许网页的背景图片与banner(横幅)图片同步切换,从而创造出更具吸引力的视觉效果。 首先,我们需要理解...

    banner多图片轮换效果

    在网页设计中,"banner多图片轮换效果"是一种常见的视觉呈现方式,它可以在网站的头部展示一组图片,通过定时切换来吸引用户的注意力并提供动态的用户体验。这种效果通常是通过JavaScript库,比如jQuery来实现的,...

    android实现banner图

    在Android应用开发中,Banner图通常用于展示一系列滑动的图片或内容,为用户提供丰富的视觉体验。本教程将深入探讨如何在Android中实现一个能够加载网络图片的Banner效果。 首先,我们需要了解Android中的图片加载...

    自己整合自适应屏幕的banner

    标题中的“自己整合自适应屏幕的banner”指的是创建一个能够自动适应不同屏幕尺寸的横幅(banner)设计,这在现代网页设计中非常重要。自适应屏幕的横幅意味着无论用户使用的是桌面、平板还是手机,横幅都能以最佳...

    苹果官网首页左右全屏banner焦点图

    这种设计模式被称为全屏banner焦点图,因为它占据整个屏幕宽度,提供了强烈的视觉冲击力,使用户在打开网页时第一时间注意到。 在描述中提到,“左右全屏”意味着焦点图是横跨整个屏幕宽度的,并且用户可以通过向左...

    Android Banner轮播图效果实现(带下标)

    综上所述,实现"Android Banner轮播图效果实现(带下标)"需要掌握Android组件的使用、网络请求、数据适配、图片加载、动画效果、生命周期管理以及性能优化等多个方面的知识。通过实践这些技术,开发者可以创建出功能...

    自定义Banner广告轮播图

    在Android应用开发中,Banner广告轮播图是一种常见的展示方式,用于吸引用户的注意力并推广不同的内容,如产品、服务或活动。自定义Banner广告轮播图可以满足开发者对设计和功能的个性化需求,同时,自定义Indicator...

    首页banner图片小清新式切换

    3. 数据结构与数组:为了管理多张Banner图片,可以使用数组存储图片的URL或DOM元素,然后通过遍历数组来依次展示图片。 4. 响应式设计:考虑到不同设备的屏幕尺寸,首页Banner通常需要具有响应式设计,以适应手机、...

Global site tag (gtag.js) - Google Analytics