鸿蒙开发DE中Swiper组件和Grid组件的基本使用

一.Swiper组件的功能

  • Swiper组件提供了滑动轮播显示的能力。当内部设置了多个子组件后可以对这些子组件进行轮播显示。

例如:

image.png

  • 设置尺寸

    ①直接设置Swiper容器尺寸(子组件会自动拉伸铺满容器内部(优先级高))

    ②设置内部子组件的尺寸(会给Swiper容器撑开)


     Swiper() {
     // 轮播内容 
     // (设置尺寸,撑开swiper)
     }
     // 设置尺寸(内容拉伸、优先级高)
     .width('100%')
     .height(100)
  • 常用属性
属性名 类型 说明
loop boolean 是否开启循环。设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。默认值:true
autoPlay boolean 子组件是否自动播放。默认值:false。说明:loop为false时,自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。
interval number 使用自动播放时播放的时间间隔,单位为毫秒。默认值:3000
vertical boolean 是否为纵向滑动。默认值:false

更多属性参考文档[Swiper-容器组件-ArkTS组件-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者

  • 绑定按钮控制轮播图上一页下一页

    代码演示 :

@Entry
@Component
struct xmyp {
 controller =new SwiperController()   //new一个Swiper的控制器
 build() {
 Column(){
 Swiper(this.controller){             //给Swiper组件绑定上控制器
 Image('/images/ic_swiper_xmyp01.jpeg')
 Image('/images/ic_swiper_xmyp02.jpeg')
 Image('/images/ic_swiper_xmyp03.jpeg')
 Image('/images/ic_swiper_xmyp04.jpeg')
 }
 .height(160)
 .width('100%')
 .autoPlay(true)
 .indicator(Indicator.dot()
 .selectedItemWidth(30)
 .selectedItemHeight(4)
 .itemWidth(10)
 .itemHeight(4)
 .selectedColor(Color.White)
 .color(Color.Black))
 Button('上一页')                     //给按钮添加上点击事件
 .onClick(()=>{
  {
 this.controller.showNext()
 }})
 Button('下一页')
 .onClick(()=>{
 this.controller.showNext()
 })
 }
 }
}

效果图:

image.png

二.Grid组件的功能

  • 网格布局

功能:布局是很多行和列组成的,可能需要合并或者滚动就可以使用Grid组件

①如果给行列设定固定的几行几列(不滚动)

②合并行或者列 (不滚动)

生成以下效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值