Harmony开发-ArkUI框架速成十一Swiper布局

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、嵌入式、鸿蒙、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴!君志所向,一往无前!


1.Swiper

1.1 Swiper组件

Swiper组件提供滑动轮播显示的能力。

Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示,比如:

1.2 基本用法

首先来看看如何设置轮播内容,以及设置尺寸

  1. 轮播内容:内容作为Swiper的子组件即可

  2. 尺寸:

a. 设置 Swiper 的尺寸:内容会拉伸为和 Swiper 一致(优先级高)

b. 设置内容尺寸:会将Swiper撑开

复制代码
  @Entry
@Component
struct Index {
  // Swiper 基本使用
  build() {
    Column() {
      Text('Swiper基本使用')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)
      Swiper() {
        Text('0')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .fontSize(30)
        Text('1')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Green)
          .fontColor(Color.White)
          .fontSize(30)
        Text('2')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Blue)
          .fontColor(Color.White)
          .fontSize(30)
      }
      .width('100%')
      .height(100)
    }
    .width('100%')
    .height('100%')
  }
}

1.3 常用属性

设置了内容以及尺寸之后已经可以实现基础的轮播效果,接下来看看一些常见属性

使用上述属性,将轮播图调整为:

  1. 自动播放

  2. 播放间隔:1 秒钟

  3. 纵向滑动

1.4 调整导航点

如果默认的导航点不满足效果,可以自行调整

导航点的调整可以分为 2 类:

  1. 显示 or 隐藏

  2. 导航点类型:

a. 圆点(掌握)

b. 数字(了解)

位置属性取值:

样式属性取值:

复制代码
 Swiper() {
        Text('0')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .fontSize(30)
        Text('1')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Green)
          .fontColor(Color.White)
          .fontSize(30)
        Text('2')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Blue)
          .fontColor(Color.White)
          .fontSize(30)
      }
      .width('100%')
      .height(100)
      .loop(false) // 是否开启循环 true/false
      .autoPlay(true) // 是否自动播放 true/false
      .interval(4000) // 自动播放时间间隔 单位毫秒
      .vertical(false) // 是否纵向滑动
      .indicator(
        Indicator.dot()
          .left(10)// 左侧距离
          .top(10)// 顶部距离
          .bottom(10)// 底部距离
          .right(10)// 右侧距离(距离属性组合使用,无需全部设置)
          .itemWidth(20)// 指示器宽度
          .itemHeight(20)// 指示器高度
          .selectedItemWidth(30)// 选中指示器宽度
          .selectedItemHeight(30)// 选中指示器高度
          .selectedColor(Color.Yellow)// 选中指示器颜色
          .color(Color.Black) // 默认指示器宽度
      ) // 圆形导航点

2 Swiper综合实践

复制代码
@Entry
@Component
struct Index {

  build() {
    Column() {
      Text('Swiper实践')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)
      Swiper() {
        Image($r('app.media.lb_1'))
        Image($r('app.media.lb_2'))
        Image($r('app.media.lb_3'))
        Image($r('app.media.lb_4'))
      }
      .width('100%')
      .height(160)
      .autoPlay(true)
      .interval(2000)
      .indicator(
        Indicator.dot()// 圆形导航点
          .selectedColor(Color.Red)// 选中颜色
          .selectedItemWidth(30)// 选中宽度
          .selectedItemHeight(4)// 选中高度
          .itemWidth(10)// 默认宽度
          .itemHeight(4) // 默认高度
      )
    }
    .width('100%')
    .height('100%')
  }
}
相关推荐
Gracemark6 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼7 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
高心星7 小时前
鸿蒙5.0项目开发——V2装饰器@Event的使用
harmonyos
洋葱头_8 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
ChinaDragon8 小时前
HarmonyOS:创建ArkTS卡片
harmonyos
奔跑的蜗牛ing8 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
高心星8 小时前
HarmonyOS 5.0应用开发——V2装饰器@once的使用
harmonyos
最后一个农民工11 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
程序员潘Sir13 小时前
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
harmonyos·鸿蒙