鸿蒙HarmonyOS-Swiper轮播组件的详细讲解

Swiper 轮播组件

Swiper是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。(文字、图片...)
需要注意的点：
1，在Swiper设置宽高后，里面的内容会自动拉伸。
2，如果Swiper没有设置宽高，Swiper的宽高由里面的内容大小决定

关于轮播图图片大小问题

其实关于轮播的图片大小最好都是一致的。
最好不要每一张图片的尺寸都不一样。因为这样会产生一些问题。

基本的语法

@Entry
@Component
struct Index {
  build() {
     Column(){
       Swiper(){
       //  轮播内容
       }
       // 设置尺寸之后，Swiper里面的内容会自动拉伸
       .width('100%').height(300)
    }
  }
}

轮播的基本使用:内容是文字

@Entry
@Component
struct Index {
  build() {
     Column(){
       Swiper(){
          //  轮播内容； 在Swiper设置宽高后，里面的内容会自动拉伸
         Text("1").backgroundColor(Color.Pink)
         Text("2").backgroundColor(Color.Brown)
         Text("3").backgroundColor(Color.Orange)
       }
       // 设置尺寸之后，Swiper里面的内容会自动拉伸
       .width('100%').height(200)
    }
  }
}

轮播的基本使用:内容是图片

@Entry
@Component
struct Index {
  build() {
     Column(){
       Swiper(){
          //  轮播内容； 在Swiper设置宽高后，里面的内容会自动拉伸
          Image($r('app.media.hua'))
          Image($r('app.media.hongmeng'))
          Image($r('app.media.siteng'))
       }
       // 设置尺寸之后，Swiper里面的内容会自动拉伸
       .width('100%').height(200)
    }
  }
}

如果Swiper没有设置宽高，Swiper的宽高由里面的内容大小决定

@Entry
@Component
struct Index {
  build() {
     Column(){
       Swiper(){
          //  如果Swiper没有设置宽高，Swiper的宽高由里面的内容大小决定
          Image($r('app.media.hua')).height(200)
          Image($r('app.media.hongmeng')).height(200)
          Image($r('app.media.siteng')).height(200)
       }
    }
  }
}

Swiper的常见属性

属性	类型	描述	默认值
loop	boolean	是否开启循环轮播（滑动到最后一页后是否回到第一页）。	true
autoplay	boolean	是否自动播放（轮播图自动切换）。	false
interval	number	自动播放的时间间隔（单位：毫秒）。	3000
duration	number	页面切换动画的持续时间（单位：毫秒）。	300
vertical	boolean	轮播方向是否为垂直方向（默认水平）。	false
indicator	boolean	object	是否显示页面索引指示点（如小圆点），或通过对象配置样式（如颜色、大小等）。
index	number	设置初始显示的页面索引（从 0 开始）。	0
disabled	boolean	是否禁用用户手动滑动。

@Entry
@Component
struct Index {
  build() {
     Column(){
       Swiper(){
          //  如果Swiper没有设置宽高，Swiper的宽高由里面的内容大小决定
          Image($r('app.media.hua')).height(200)
          Image($r('app.media.hongmeng')).height(200)
          Image($r('app.media.siteng')).height(200)
       }
       .loop(true) // 自动开启循环(展示完最后一个会切换到第1个)
       .autoPlay(true) // 是否为自动播放
       .interval(3000) // 自动播放的间隔
    }
  }
}

轮播指示灯的配置

@Entry
@Component
struct Index {
  build() {
     Column(){
       Swiper(){
          //  如果Swiper没有设置宽高，Swiper的宽高由里面的内容大小决定
          Image($r('app.media.hua')).height(200)
          Image($r('app.media.hongmeng')).height(200)
          Image($r('app.media.siteng')).height(200)
       }
       .loop(true) // 自动开启循环(展示完最后一个会切换到第1个)
       .autoPlay(true) // 是否为自动播放
       .interval(3000) // 自动播放的间隔
       .indicator(
         Indicator.dot() // 小圆点
           .itemWidth(20) // 样式的宽
           .itemHeight(10) // 样式的高
           .color(Color.Pink) // 样式的颜色
           .selectedItemWidth(10) // 选中时的宽度
           .selectedItemHeight(5) // 选中时的高度
           .selectedColor(Color.Black) // 选中时的颜色
       )
    }
  }
}

在Swiper设置宽高后,里面的内容会自动拉伸

@Entry
@Component
struct Index {
  build() {
     Column(){
       Swiper(){
          Image($r('app.media.hua'))
          Image($r('app.media.hongmeng'))
          Image($r('app.media.siteng'))
       }.width('100%').height(200)
       // 我们一般在 Swiper容器上设置宽高，这样Swiper里面的容器会自动撑满。
       .loop(true) // 自动开启循环(展示完最后一个会切换到第1个)
       .autoPlay(true) // 是否为自动播放
       .interval(3000) // 自动播放的间隔
       .indicator(
         Indicator.dot() // 小圆点
           .itemWidth(20) // 样式的宽
           .itemHeight(10) // 样式的高
           .color(Color.Pink) // 样式的颜色
           .selectedItemWidth(10) // 选中时的宽度
           .selectedItemHeight(5) // 选中时的高度
           .selectedColor(Color.Black) // 选中时的颜色
       )
    }
  }
}

宽高比aspectRatio

aspectRatio(1.5) 表示宽高比是2; （宽度/高度=2）
也就是说：可以使用这个属性，做到等比例缩放

Text('我是文字').width(100).aspectRatio(2).backgroundColor(Color.Pink)

使用aspectRatio适配多端轮播

@Entry
@Component
struct Index {
  build() {
     Column(){
       Swiper(){
          Image($r('app.media.hua'))
          Image($r('app.media.hongmeng'))
          Image($r('app.media.siteng'))
       }.width('100%').aspectRatio(2)
       // 如果多端适配的话,我们还需要新增一个宽高比aspectRatio；宽度/高度 = 2
       .loop(true) // 自动开启循环(展示完最后一个会切换到第1个)
       .autoPlay(true) // 是否为自动播放
       .interval(3000) // 自动播放的间隔
       .indicator(
         Indicator.dot() // 小圆点
           .itemWidth(20) // 样式的宽
           .itemHeight(10) // 样式的高
           .color(Color.Pink) // 样式的颜色
           .selectedItemWidth(10) // 选中时的宽度
           .selectedItemHeight(5) // 选中时的高度
           .selectedColor(Color.Black) // 选中时的颜色
       )
    }
  }
}