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

一.Swiper组件的功能

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

例如：

• 设置尺寸

  ①直接设置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开发者 (huawei.com)

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

  代码演示 ：

@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()
        })
    }
    }
}

效果图：

二.Grid组件的功能

• 网格布局

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

①如果给行列设定固定的几行几列（不滚动）

②合并行或者列 （不滚动）

生成以下效果：

代码演示：

@Entry
@Component
struct five {
@Builder GriditemBuilder(text:string){
  GridItem(){
    Text(text)
  }
  .backgroundColor(Color.Pink)
}
  build() {
    Column(){
      Grid(){
        this.GriditemBuilder('1')
        this.GriditemBuilder('2')
        this.GriditemBuilder('3')
        this.GriditemBuilder('4')
        this.GriditemBuilder('5')
        this.GriditemBuilder('6')
        this.GriditemBuilder('7')
        this.GriditemBuilder('8')
        this.GriditemBuilder('9')
      }
      .width('100%')
      .height(300)
      .columnsTemplate('1fr 2fr 3fr')
      .rowsTemplate('1fr 2fr 3fr')
      .rowsGap(10)
      .columnsGap(10)
      .padding(10)
    }
    .height('100%')
    .width('100%')
  }
}

注意点：行列的单位是fr

合并效果：

代码演示：

@Entry
@Component
struct six {
  // 生成 12 个元素的数组
  nums: number[] = Array.from({ length: 12 })

  build() {
    Grid() {
      ForEach(this.nums, (item: number, index: number) => {  //遍历长度为12的数组
       if (index==2){                     //当索引为2时第三列和第四列合并
         GridItem() {
           Text((index+1).toString())       //index+1是因为数组遍历时索引是从0开始
             .fontColor(Color.White)
             .fontSize(30)
         }
         .backgroundColor('#9dc3e6')
         .columnStart(0)
         .columnEnd(1)
       }else      
       if (index==3){                 //索引为3时 第二行和第三行合并
         GridItem() {
           Text((index+1).toString())
             .fontColor(Color.White)
             .fontSize(30)
         }
         .backgroundColor('#9dc3e6')
         .rowStart(0)
         .rowEnd(1)
       }else
       if (index==7){                    //索引为7时第二，三，四行合并
         GridItem() {
           Text((index+1).toString())
             .fontColor(Color.White)
             .fontSize(30)
         }
         .backgroundColor('#9dc3e6')
         .columnStart(0)
         .columnEnd(2)
       }else {
         GridItem() {  
           Text((index + 1).toString())
             .fontColor(Color.White)
             .fontSize(30)
         }
         .backgroundColor('#9dc3e6')
       }



      })
    }
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr')
    .width('100%')
    .height(260)
    .rowsGap(10)
    .columnsGap(10)
    .padding(10)
  }
}

注意点：合并行列用的是（colunmnStart/columnEnd）（rowStart/rowEnd） 两组属性需要配合使用不可单独使用

• 代码控制滚动条

核心步骤：

1. 创建 Scroller 对象
2. 设置给 Grid
3. 调用 Scroller 对象的 scrollPage 方法、

// 创建 Scroller 对象
scroller: Scroller = new Scroller()

// 设置给 Grid
 Grid(this.scroller) {
   // ...
 }

// 通过代码控制
this.scroller.scrollPage({
  next:true // 下一页
  next:false // 上一页
})

• 代码控制滚动条滚动

步骤

1. 创建 Scroller 对象
2. 设置给 Grid
3. 调用 Scroller 对象的 scrollPage 方法

代码：

interface NavItem {
  title: string
  icon: ResourceStr
}

@Entry
@Component
struct Day01_07_Grid03 {
  @State message: string = '滚动';
  scroller: Scroller = new Scroller()
  navList: NavItem[] = [
    { title: '上新精选', icon: $r('app.media.ic_xiaomi_nav_01') },
    { title: '智能家电', icon: $r('app.media.ic_xiaomi_nav_02') },
    { title: '小米众筹', icon: $r('app.media.ic_xiaomi_nav_03') },
    { title: '有品会员', icon: $r('app.media.ic_xiaomi_nav_04') },
    { title: '有品秒杀', icon: $r('app.media.ic_xiaomi_nav_05') },
    { title: '原产地', icon: $r('app.media.ic_xiaomi_nav_06') },
    { title: '生活优选', icon: $r('app.media.ic_xiaomi_nav_07') },
    { title: '手机', icon: $r('app.media.ic_xiaomi_nav_08') },
    { title: '小米自营', icon: $r('app.media.ic_xiaomi_nav_09') },
    { title: '茅台酒饮', icon: $r('app.media.ic_xiaomi_nav_10') },
    { title: '鞋服饰品', icon: $r('app.media.ic_xiaomi_nav_11') },
    { title: '家纺餐厨', icon: $r('app.media.ic_xiaomi_nav_12') },
    { title: '食品生鲜', icon: $r('app.media.ic_xiaomi_nav_13') },
    { title: '好惠买', icon: $r('app.media.ic_xiaomi_nav_14') },
    { title: '家具家装', icon: $r('app.media.ic_xiaomi_nav_15') },
    { title: '健康养生', icon: $r('app.media.ic_xiaomi_nav_16') },
    { title: '有品海购', icon: $r('app.media.ic_xiaomi_nav_17') },
    { title: '个护清洁', icon: $r('app.media.ic_xiaomi_nav_18') },
    { title: '户外运动', icon: $r('app.media.ic_xiaomi_nav_19') },
    { title: '3C数码', icon: $r('app.media.ic_xiaomi_nav_20') }
  ]

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
      Grid(this.scroller){              //绑定控制器
        ForEach(this.navList,(item:NavItem,index:number)=>{
          GridItem(){
            Column(){
              Image(item.icon)
                .width('80%')
              Text(item.title)
                .fontSize(12)
            }
            .height('100%')
            // .backgroundColor(Color.Pink)
          }
          .width('20%')


        })
      }
      .width('100%')
      .height(170)
      .rowsTemplate('1fr 1fr')
      // .rowsGap(3)
      // .columnsGap(3)

      Row(){
        Button('上一页')
          .width(100)
          .onClick(() => {
            this.scroller.scrollPage({
              next: false
            })
          })
        Button('下一页')
          .onClick(() => {
            this.scroller.scrollPage({
              next: true
            })
          })
      }
    }
    .width('100%')
    .height('100%')
    .padding(10)
    .backgroundColor('#f5f5f5')
  }
}

效果图：

• 自定义滚动条

1. 和 Grid 共用同一个 Scroller
2. 创建 ScrollBar 组件并设置属性

// 和 Grid 共用同一个 Scroller
scroller: Scroller = new Scroller()

// 和 Grid 共用同一个 Scroller
Grid(this.scroller){
  // 略
}

// 和 Grid 共用同一个 Scroller
// 创建 ScrollBar 组件并设置属性
ScrollBar({
  scroller: this.scroller,
  direction: ScrollBarDirection.Horizontal // 方向
}) {
  // 滚动内容 设置外观即可
  Text()
}
// 设置外观

• 小米有品综合案例

效果图：

代码演示：

@Builder
function yp() {
  Row() {
    Row({ space: 15 }) {
      Image($r('app.media.ic_xiaomi_logo'))
        .width(50)
      Row({ space: 8 }) {
        Image($r('app.media.ic_xiaomi_search'))
          .width(20)
        Text('电视')
          .fontSize(17)
          .fontColor('rgba(0,0,0,0.4)')
      }
      .width(200)
      .height(40)
      .borderRadius(20)
      .padding(8)
      .border({ width: 1.5, color: '#a27a3e' })
    }

    Badge({ count: 99, position: BadgePosition.RightTop, style: {} }) {
      Image($r('app.media.ic_xiaomi_ring'))
        .width(40)
    }
    .margin({ right: 10 })
  }
  .justifyContent(FlexAlign.SpaceBetween)
  .width('100%')
}   //全局Builder一个容器及其子组件（包括属性）简化代码界面 -->需要加上function

interface NavItem {
  title: string
  icon: ResourceStr
}      //定义一个对象接口

@Entry
@Component
struct xiaomi {
  @Builder
  swiper(num: number) {
    Image($r(`app.media.ic_swiper_xmyp0${num}`))
      .width('100%')
      .padding(5)
      .borderRadius(15)
  }   //局部Builder一个image及其属性-->不需要加function

  navList: NavItem[] = [
    { title: '上新精选', icon: $r('app.media.ic_xiaomi_nav_01') },
    { title: '智能家电', icon: $r('app.media.ic_xiaomi_nav_02') },
    { title: '小米众筹', icon: $r('app.media.ic_xiaomi_nav_03') },
    { title: '有品会员', icon: $r('app.media.ic_xiaomi_nav_04') },
    { title: '有品秒杀', icon: $r('app.media.ic_xiaomi_nav_05') },
    { title: '原产地', icon: $r('app.media.ic_xiaomi_nav_06') },
    { title: '生活优选', icon: $r('app.media.ic_xiaomi_nav_07') },
    { title: '手机', icon: $r('app.media.ic_xiaomi_nav_08') },
    { title: '小米自营', icon: $r('app.media.ic_xiaomi_nav_09') },
    { title: '茅台酒饮', icon: $r('app.media.ic_xiaomi_nav_10') },
    { title: '鞋服饰品', icon: $r('app.media.ic_xiaomi_nav_11') },
    { title: '家纺餐厨', icon: $r('app.media.ic_xiaomi_nav_12') },
    { title: '食品生鲜', icon: $r('app.media.ic_xiaomi_nav_13') },
    { title: '好惠买', icon: $r('app.media.ic_xiaomi_nav_14') },
    { title: '家具家装', icon: $r('app.media.ic_xiaomi_nav_15') },
    { title: '健康养生', icon: $r('app.media.ic_xiaomi_nav_16') },
    { title: '有品海购', icon: $r('app.media.ic_xiaomi_nav_17') },
    { title: '个护清洁', icon: $r('app.media.ic_xiaomi_nav_18') },
    { title: '户外运动', icon: $r('app.media.ic_xiaomi_nav_19') },
    { title: '3C数码', icon: $r('app.media.ic_xiaomi_nav_20') }
  ]  //定义一个对象接口为NavItem的对象数组
  sgb: Scroller = new Scroller()    //定义一个滚动条控制器

  build() {
    Column({ space: 10 }) {
      yp()           //调用全局Builder  yp
      Swiper() {
        this.swiper(1)      //调用局部Builder swiper
        this.swiper(2)
        this.swiper(3)
        this.swiper(4)
      }
      .autoPlay(true)        //轮播图自动播放
      .indicator(
        Indicator.dot()
          .selectedItemWidth(20)
          .selectedColor(Color.White)
          .color('rgba(0,0,0,0.5)')
          .itemWidth(10))          //定义Swiper的滚动条样式

      Grid(this.sgb) {         //网格布局 绑定控制器sgb
        ForEach(this.navList, (item: NavItem, index: number) => { //遍历数组navList
          GridItem() {
            Column() {
              Image(item.icon)
                .width('80%')
              Text(item.title)
            }
          }             
          .width('20%')
        })
      }
      .height(160)
      .rowsTemplate('1fr 1fr')   //两行显示
      .scrollBar(BarState.Off)

      ScrollBar({
        scroller: this.sgb,                          //自定义滚动条跟Grid的滚动条绑定
        direction: ScrollBarDirection.Horizontal,      //水平滚动
        state: BarState.On                              //滚动条一直显示
      }) {
        Column() {
        }
        .backgroundColor(Color.Orange)
        .width(15)
        .height(5)
        .borderRadius(3)
      }
      .backgroundColor(Color.Gray)
      .width(30)
      .borderRadius(3)
      .position({
        x:165,
        y:377
      })

      Image($r('app.media.ic_xiaomi_floor'))
        .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

以上均为个人总结，如有不足请指出。若有更好的写法求私信指点~