ArkTs布局入门08——轮播（Swiper）

最新推荐文章于 2025-09-19 09:31:44 发布

原创

最新推荐文章于 2025-09-19 09:31:44 发布 · 2.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#ui #harmonyos #鸿蒙

如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！扫描下方名片，关注公众号。

1、概述

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。

2、布局与约束

Swiper作为一个容器组件，在自身尺寸属性未被设置时，会自动根据子组件的大小设置自身的尺寸。如果开发者对Swiper组件设置了固定的尺寸，则在轮播显示过程中均以该尺寸生效；否则，在轮播过程中，会根据子组件的大小自动调整自身的尺寸。

3、循环播放

通过loop属性控制是否循环播放，该属性默认值为true。

当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。

loop为true：

...private swiperController: SwiperController = new SwiperController()...Swiper(this.swiperController) {
  
    Text("0")    .width('90%')    .height('100%')    .backgroundColor(Color.Gray)    .textAlign(TextAlign.Center)    .fontSize(30)  Text("1")    .width('90%')    .height('100%')    .backgroundColor(Color.Green)    .textAlign(TextAlign.Center)    .fontSize(30)  Text("2")    .width('90%')    .height('100%')    .backgroundColor(Color.Blue)    .textAlign(TextAlign.Center)    .fontSize(30)}.loop(true)

loop为false：

Swiper(this.swiperController) {
  
    Text("0")    .width('90%')    .height('100%')    .backgroundColor(Color.Gray)    .textAlign(TextAlign.Center)    .fontSize(30)  Text("1")    .width('90%')