鸿蒙开发-UI-布局
鸿蒙开发-UI-布局-线性布局
鸿蒙开发-UI-布局-层叠布局
鸿蒙开发-UI-布局-弹性布局
鸿蒙开发-UI-布局-相对布局
鸿蒙开发-UI-布局-格栅布局
鸿蒙开发-UI-布局-列表
鸿蒙开发-UI-布局-网格
文章目录
前言
一、基本概念
二、开发布局
三、应用特性
1.循环播放
2.自动轮播
3.导航点样式
4.页面切换方式
5.轮播方向
6.每页显示多个子页面
总结
前言
上文详细学习了网格布局相关概念，以及网格布局的相关约束，详细学习了网格布局排列方式以及网格行列间距的设置，了解了网格布局常用的使用场景以及性能优化。本文将学习轮播布局。
一、基本概念
Swiper组件是一个容器组件，提供滑动轮播显示的能力。当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。
二、开发布局
Swiper容器组件未设置尺寸属性时，会自动根据子组件的大小设置其尺寸。
Swiper组件设置了固定的尺寸，则在轮播显示过程中均以该尺寸生效。
三、应用特性
1.循环播放
通过loop属性控制是否循环播放，该属性默认值为true。
当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。
//step1：定义轮播控制器
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)
}
.loop(true) //注：设置loop属性为true，轮播可以循环播放2.自动轮播
Swiper通过设置autoPlay属性，控制是否自动轮播子组件。该属性默认值为false。
autoPlay为true时，会自动切换播放子组件，子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为3000，单位毫秒。
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.Pink)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.loop(true)
.autoPlay(true) //注：设置自动轮播
.interval(1000)//注：设置自动播放时间间隔1000ms3.导航点样式
Swiper提供了默认的导航点样式，导航点默认显示在Swiper下方居中位置，开发者也可以通过indicatorStyle属性自定义导航点的位置和样式。
通过indicatorStyle属性，开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置，同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。
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.Pink)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.indicatorStyle({
size: 30,
left: 0,
color: Color.Red
})如上代码所示，自定义导航点样式，导航点直径设为30VP，左边距为0，导航点颜色设为红色
4.页面切换方式
Swiper支持三种页面切换方式：手指滑动、点击导航点和通过控制器。
以控制器切换为例说明：
@Entry
@Component
struct SwiperDemo {
//step1:定义轮播控制器
private swiperController: SwiperController = new SwiperController();
build() {
//step2:定义UI描述，Column容器中第一子组件Swiper，第二个子组件Row容器（包含两个button组件）
Column({ space: 5 }) {
Swiper(this.swiperController) {
Text("0")
.width(250)
.height(250)
.backgroundColor(Color.Gray)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("1")
.width(250)
.height(250)
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.indicator(true)
Row({ space: 12 }) {
//step3:添加button组件onclick事件通过轮播控制器showNext(),showPrevious(),实现向前向后翻页
Button('showNext')
.onClick(() => {
this.swiperController.showNext();
})
Button('showPrevious')
.onClick(() => {
this.swiperController.showPrevious();
})
}.margin(5)
}.width('100%')
.margin({ top: 5 })
}
}5.轮播方向
Swiper支持水平和垂直方向上进行轮播，主要通过vertical属性控制，vertical默认值为false。
当vertical为true时，表示在垂直方向上进行轮播。
为false时，表示在水平方向上进行轮播。
Swiper(this.swiperController) {
...
}
.indicator(true)
.vertical(false)如以上代码所示，轮播方向为水平方向
6.每页显示多个子页面
Swiper支持在一个页面内同时显示多个子组件，通过displayCount属性设置。
Swiper(this.swiperController) {
Text("0")
.width(250)
.height(250)
.backgroundColor(Color.Gray)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("1")
.width(250)
.height(250)
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("2")
.width(250)
.height(250)
.backgroundColor(Color.Pink)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("3")
.width(250)
.height(250)
.backgroundColor(Color.Blue)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.indicator(true)
.displayCount(2) //注：定义一个页面内显示两个子组件渲染效果如下：
总结
本文学习了解轮播布局使用的Swiper组件，了解组件的布局约束，详细学习了轮播容器组件的相关应用特性（循环播放、自动播放、导航样式自定义、轮播方向控制、轮播页面控制、单页面多组件控制），下文将学习鸿蒙开发UI相关的常用组件。
