HarmonyOS Next典型布局案例：运营横幅（Banner）原创

SameX

发布于 2025-2-26 15:58

1.8w浏览

0收藏

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。

在HarmonyOS Next应用开发中，运营横幅（Banner）是吸引用户注意力、展示重要信息的关键元素。而Swiper组件则是实现Banner轮播效果的得力助手。今天，咱们就深入剖析一下如何利用Swiper组件打造出适配不同设备的运营横幅。

Swiper组件的基本使用

Swiper组件在HarmonyOS Next中是实现Banner轮播效果的核心组件。它可以让图片或其他内容在一个容器内进行轮播展示，为用户带来动态且丰富的视觉体验。使用Swiper组件非常简单，下面是一个基本的示例代码：

@Entry
@Component
struct BasicSwiperBanner {
    private data: Array<Resource> = [
        $r('app.media.banner1'),
        $r('app.media.banner2'),
        $r('app.media.banner3')
    ]
    build() {
        Swiper() {
            ForEach(this.data, (item: Resource) => {
                Image(item).width('100%').height(200)
            })
        }
          .autoPlay(true)
          .indicator(true)
          .itemSpace(10)
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

在这段代码中，首先定义了一个包含多个图片资源的数组data，这些图片将作为Banner的轮播内容。然后在Swiper组件内部，通过ForEach循环遍历数组，将每个图片添加到Swiper中，并设置图片的宽度为100%，高度为200。autoPlay(true)属性使Banner能够自动播放，indicator(true)显示轮播指示点，方便用户了解当前展示的是哪一张图片，itemSpace(10)则设置了图片之间的间距为10。这样，一个简单的Banner轮播效果就实现了。

不同断点下调整Swiper组件的展示数量

为了让Banner在不同设备上都能达到最佳的展示效果，我们需要根据设备屏幕尺寸的变化调整Swiper组件中展示的图片数量。这就用到了Swiper组件的displayCount属性。通过结合断点和displayCount属性，我们可以实现不同屏幕尺寸下展示不同数量的图片。下面是一个示例代码：

import { BreakpointSystem, BreakPointType } from '../common/breakpointsystem'

@Entry
@Component
export default struct Banner {
    private data: Array<Resource> = [
        $r('app.media.banner1'),
        $r('app.media.banner2'),
        $r('app.media.banner3'),
        $r('app.media.banner4'),
        $r('app.media.banner5'),
        $r('app.media.banner6')
    ]
    private breakpointSystem: BreakpointSystem = new BreakpointSystem()
    @StorageProp('currentBreakpoint') currentBreakpoint: string ='md'

    aboutToAppear() {
        this.breakpointSystem.register()
    }

    aboutToDisappear() {
        this.breakpointSystem.unregister()
    }

    build() {
        Swiper() {
            ForEach(this.data, (item: Resource) => {
                Image(item).width('100%').height(200)
            })
        }
          .indicator(new BreakPointType({ sm: true, md: false, lg: false }).getValue(this.currentBreakpoint)!)
          .displayCount(new BreakPointType({ sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)!)
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

在这个示例中，借助BreakpointSystem和BreakPointType来获取当前的断点信息。BreakPointType用于定义不同断点下的属性值，这里定义了在sm断点下显示1张图片，md断点下显示2张图片，lg断点下显示3张图片。displayCount属性根据当前断点值动态调整展示图片的数量，indicator属性则根据断点控制指示点的显示与否，从而在不同设备上实现了个性化的Banner展示效果。

结合GridRow和媒体查询优化Banner适配

为了进一步优化Banner在不同设备上的适配效果，我们可以结合GridRow组件和媒体查询。GridRow组件提供了栅格布局能力，能更好地控制Banner在页面中的位置和大小；媒体查询则可以监听设备的多种特征变化，如窗口宽度、横竖屏等，实现更精准的布局调整。以下是一个最佳实践示例：

import { BreakpointSystem, BreakPointType } from '../common/breakpointsystem'
import mediaQuery from '@ohos.mediaquery'

@Entry
@Component
export struct OptimizedBanner {
    private data: Array<Resource> = [
        $r('app.media.banner1'),
        $r('app.media.banner2'),
        $r('app.media.banner3')
    ]
    private breakpointSystem: BreakpointSystem = new BreakpointSystem()
    @StorageProp('currentBreakpoint') currentBreakpoint: string ='md'

    aboutToAppear() {
        this.breakpointSystem.register()
        // 媒体查询监听窗口宽度变化，更新断点信息
        const smListener = mediaQuery.matchMediaSync('(320vp<=width<600vp)')
        const mdListener = mediaQuery.matchMediaSync('(600vp<=width<840vp)')
        const lgListener = mediaQuery.matchMediaSync('(840vp<=width)')
        smListener.on('change', (mediaQueryResult) => {
            if (mediaQueryResult.matches) {
                this.currentBreakpoint ='sm'
            }
        })
        mdListener.on('change', (mediaQueryResult) => {
            if (mediaQueryResult.matches) {
                this.currentBreakpoint ='md'
            }
        })
        lgListener.on('change', (mediaQueryResult) => {
            if (mediaQueryResult.matches) {
                this.currentBreakpoint = 'lg'
            }
        })
    }

    aboutToDisappear() {
        this.breakpointSystem.unregister()
    }

    build() {
        GridRow() {
            GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
                Swiper() {
                    ForEach(this.data, (item: Resource) => {
                        Image(item).width('100%').height(200)
                    })
                }
                  .indicator(new BreakPointType({ sm: true, md: false, lg: false }).getValue(this.currentBreakpoint)!)
                  .displayCount(new BreakPointType({ sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)!)
            }
        }
          .padding({ left: 12, right: 12, top: 16, bottom: 16 })
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.

在这段代码中，首先利用媒体查询监听窗口宽度变化，实时更新currentBreakpoint的值。然后通过GridRow和GridCol组件，将Swiper组件包裹起来，使其在不同断点下都能占据合适的屏幕空间。GridCol的span属性在不同断点下设置为占据12列，保证了Swiper组件在各种屏幕尺寸下都能完整显示。同时，结合之前介绍的displayCount和indicator属性的动态设置，使得Banner在不同设备上不仅展示数量合理，而且位置和大小也能自适应调整，为用户带来更加优质的视觉体验。

通过深入了解Swiper组件的基本使用、不同断点下调整展示数量，以及结合GridRow和媒体查询进行优化适配，我们能够在HarmonyOS Next应用开发中打造出高效、美观且适配各种设备的运营横幅。希望这些内容能帮助开发者在实际项目中更好地运用相关技术，提升应用的整体质量。

分类

HarmonyOS

标签

鸿蒙

51CTO

51CTO博客

51CTO学堂

HarmonyOS Next典型布局案例：运营横幅（Banner）原创

Swiper组件的基本使用

不同断点下调整Swiper组件的展示数量

结合GridRow和媒体查询优化Banner适配

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

HarmonyOS Next典型布局案例：运营横幅（Banner） 原创

Swiper组件的基本使用

不同断点下调整Swiper组件的展示数量

结合GridRow和媒体查询优化Banner适配

目录

订阅鸿蒙技术特刊，精选内容抢先看

HarmonyOS Next典型布局案例：运营横幅（Banner）原创