鸿蒙学习-Swiper、结构样式重用、Grid一、Swiper1.1、Swiper简介

首先我们知道Swiper组件是一个容器组件，并且是可以对组件里面的内容进行轮播的组件，那么它是怎么进行轮播的呢？

那么我们来讲一讲Swiper组件的定义：

当Swiper组件内的子组件尺寸大于Swiper组件的尺寸时，这些子组件就开始进行轮播显示

1.2、基础用法

设置Swiper组件尺寸（优先级高）如何设置内容尺寸，内容尺寸会将Swiper组件撑开

语法展示

 class="hljs language-javascript" lang="javascript">@Entry
@Component
struct index {
  build() {
    Swiper(){
    //子组件及尺寸（尺寸要超出Swiper组件的尺寸）
    }
    .width('100%')
    .height('100%')
  }
}

1.3、Swiper的常用属性

Swiper组件的简介和基础用法我们大家都已经了解过了，那么我们现在就一起来看一看Swiper组件的一些常用属性吧

1.3.1、loop

loop属性是用来控制是否循环的，是给布尔类型，它的默认值是true

1.3.2、autoplay

autoplay属性是用来控制是否自动播放的，同样它也是一个布尔类型，默认值是false

1.3.3、interval

interval属性是用来控制自动播放时的时间间隔的，是一个number类型，单位为毫秒

1.3.4、vertical

vertical属性是用来控制是否纵向滑动的，是给布尔类型，默认值是false（我们一般都是横向滑动的，很少使用纵向滑动）

常用的几个Swiper组件属性我们就介绍完了，当然Swiper组件的属性还有很多很多，就不一一介绍了，我们今天就先看这些常用属性代码演示

@Entry
@Component
struct index1 {
  build() {
    Swiper() {
      Text('我')
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Pink)
        .fontColor(Color.White)
        .fontSize(60)
      Text('爱')
        .textAlign(TextAlign.Center)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Yellow)
        .fontColor(Color.White)
        .fontSize(60)
      Text('学')
        .textAlign(TextAlign.Center)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Green)
        .fontColor(Color.White)
        .fontSize(60)
      Text('习')
        .textAlign(TextAlign.Center)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .fontColor(Color.White)
        .fontSize(60)
    }
    .width('100%')
    .height('100%')
    .autoPlay(true)//是否自动播放默认false
    .loop(true)//是否开启循环默认值就是true
    .interval(1000)//播放间隔1秒（1000毫秒默认为毫秒）
    .vertical(true)//纵向滚动默认false横向滚动
  }
}

1.4、导航点调整

我们的轮播组件Swiper是有一个导航点的，这个导航点的样式效果以及位置都是可以调整的，可以根据我们需要的效果来通过导航点属性来调整

1.4.1导航点

导航点属性为indicator，它的属性里面有两个类型一个是布尔类型来控制导航点的显现，另外还有一个枚举，来控制导航点样式（圆点指示器/数字指示器，我们常用圆点指示器）的位置及外观

调整导航点的显现语法演示：

@Entry
@Component
struct index {
  build() {
    Swiper(){
    }
    .width('100%')
    .height('100%')
    .indicator(false)//表示隐藏导航点（默认值是true不隐藏）
  }
}

导航点调整圆点指示器位置与外观代码演示：

@Entry
@Component
struct index {
  build() {
    Swiper(){
    }
    .width('100%')
    .height('100%')
.indicator(Indicato.dot()//圆点指示器//Indicator.digit()//数字指示器
  .itemWidth(10)//未选中导航点的宽
  .itemHeight(5)//未选中导航点的高
  .selectedItemWidth(20)//选中导航点的宽
  .selectedItemHeight(5)//选中导航点的高
  .selectedColor(Color.Black)//选中导航点的颜色
  .color(Color.White)//未选中导航点的颜色
  .left(20)//表示导航栏离左边的距离（通过上下左右可以调整导航栏的位置）
)
  }
}

二、样式和结构重用2.1、@Extend2.1.1、作用

作用：是针对某一个组件的属性和事件的扩展

2.1.2、语法结构

首先@Extend只能定义在全局写

语法：@Extend（组件名）

function functionname（参数....）{

.属性

.事件（（）=>{}）

定义以后要使用（可以传参），定义的名称不可与属性名称同名

组件（）{}.functionname（参数....）

2.2、@Styles2.2.1、作用

作用：针对通用属性通用事件进行封装，给所有组件用

局部语法：@Styles可以在全局写也可以在局部写

全局语法：@Styles function functionname（不可传参）{通用属性通用条件}

@Styles 名字（）{通用属性通用条件（在局部可以用this.访问和操作状态变量）}

2.3、@Biulder2.3.1、作用

作用：可以封装结构和样式（常用）

@Biulder可在全局也可在局部

全局语法：@Biulder function 名字（可传参）{容器组件+内容组件+相关属性（因为全局故不可用.this）}

局部语法：@Biulder 名字（可传参）{容器组件+内容组件+相关属性（局部可用.this）}

三、Grid3.1、定义

Grid组件是一个容器组件，可以让内容在固定的行列上显示，并可以设置滚动效果，常用于网格状布局

语法：

// Grid组件设置了宽高属性，则其尺寸为设置值。
// Grid组件没有设置宽高属性，Grid组件的尺寸默认适应其父组件的尺寸。
@Entry
@Component
struct zy {
  build() {
    Grid() {
      GridItem() {}
      GridItem() {}
      GridItem() {}
      GridItem() {}
      GridItem() {}
      GridItem() {}
    }
    .width('100%')
    .height('100%')
  }
}

3.2、相关属性

固定行列：用rowsTemplate（'1fr 1fr...'）和columnsTemplate（'1fr 1fr...'）来生成固定行列的宫格，用rowsGap（number）来控制行间隔、用columnsGap（number）来控制列间隔

语法：

@Entry
@Component
struct zy {
  build() {
    Grid() {
      GridItem() {
        Text('1')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }
      GridItem() {
        Text('2')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }
      GridItem() {
        Text('3')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }
      GridItem() {
        Text('4')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }
      GridItem() {
        Text('5')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }
      GridItem() {
        Text('6')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }
      GridItem() {
        Text('7')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }
      GridItem() {
        Text('8')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }
      GridItem() {
        Text('9')
          .width('100%')
          .height('100%')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Pink)
      }
    }
    .width('100%')
    .height(300)
    .rowsGap(5)//表示行间个5
    .columnsGap(5)//表示列间隔5
    .rowsTemplate('1fr 1fr 1fr')//3个1fr表示有三行
    .columnsTemplate('1fr 1fr 1fr')//3个1fr表示有三列
  }
}

效果图：

滚动：通过单独的rowsTemplate（'1fr 1fr...'）属性来控制水平滚动，通过单独的columnsTemplate（'1fr 1fr...'）属性来控制垂直滚动

语法就是固定行列代码去掉.columnsTemplate('1fr 1fr 1fr')

水平滚动效果图：

垂直滚动去掉.rowsTemplate('1fr 1fr 1fr')即可

另外我们还可以通过点击事件来控制滚动，具体步骤如下：

1.创建scroller对象：scroller：Scroller = new Scroller（）

2.绑定scroller对象：Grid（this.scroller）{}

3.通过scroller对象上面的scrollPage属性控制滚动

代码及效果图片展示：

配合ScrollBar来自定义滚动条样式

步骤：1.创建scroller对象：scroller：Scroller = new Scroller（）

2.绑定scroller对象：Grid（this.scroller）{}

3.通过ScrollBar来自定义滚动条

代码及效果图片：

结语好了，Swiper、结构样式重用、Grid的学习就到此为止了，因本人也是初学没多久可能有部分知识点没能罗列清楚解释清楚还望海涵，有什么不足之处也欢迎大家指出，其中的属性只罗列出了自认为常用的一些属性，当然还有许多不同功能的属性需要我们探索认知，学海无涯，让我们慢慢充实自己慢慢变得强大，一起加油！