鸿蒙组件：轮播组件Swiper+样式&结构重用(@Extend+@Styles+@Builder) +网格布局Grid/GridItem

一、轮播组件Swiper

1. 作用

Swiper作为一个容器组件，可以让其内部的多子组件进行轮播显示

2. Swiper基本用法及属性

//1.轮播组件Swiper基本用法
Swiper() {
  //编写需要轮播的内容(可配合其他容器组件使用,如Column,Row,Text,Image等)
}
//2.通用属性:宽,高,背景一系列属性,圆角,边框
.width('100%')//设置轮播宽度
.height('100%')//设置轮播高度
.backgroundColor( )//设置背景颜色
.border({width:,color:,style:})//设置边框
.borderRadius( )//设置圆角
//3.轮播组件Swiper基本属性
.loop(false)//设置轮播的循环,true:循环(默认),false:不循环
.autoPlay(true)//设置自动轮播,true:自动,false:不自动(默认)
.interval(0)//设置轮播延迟
.vertical(true)//设置轮播滚动方向，true:纵向滚动,false:横向滚动(默认)

3. 导航点位置及样式

Swiper() {
}
//1.导航点位置及样式
.indicator(false) //设置导航点的开关，true:打开导航(默认),false:关闭导航
.indicator(Indicator.dot()) //圆点指示器(默认)
.indicator(Indicator.digit()) //数字指示器
//✨✨圆点指示器(默认)
.indicator(
  DotIndicator.dot()
    //属性样式
    .itemWidth()//设置未选中指示器的宽度,默认为6vp
    .itemHeight()//设置未选中指示器的高度,默认为6vp
    .color()//设置未选中指示器的颜色
    .selectedItemWidth()//设置选中指示器的宽度,默认为12vp
    .selectedItemHeight()//设置选中指示器的高度,默认为6vp
    .selectedColor() //设置选中指示器的颜色
    //位置
    .left()//指示器距离左边的距离,默认为0
    .right()//指示器距离右边的距离,默认为0
    .top()//指示器距离上边的距离,默认为0
    .bottom()//指示器距离下边的距离,默认为0
)
//数字指示器
.indicator(
  DotIndicator.digit()
  //属性样式及位置同上
)

4. 页面切换方式->控制器

//页面切换方式->控制器
@Entry
@Component
struct Index1 {
  //1.创建控制器(class类)
  control: SwiperController = new SwiperController()

  build() {
    Column() {
      //2.绑定控制器
      Swiper(this.control){}
      Row(){
        Button('上一页')
          .onClick(()=>{
            //3.调用控制器实现切换效果
            this.control.showPrevious()//翻至上一页
          })
        Button('下一页')
          .onClick(()=>{
            this.control.showNext()//翻至下一页
          })
      }
    }
    .width('100%')
    .height('100%')
  }
}

二、样式&结构重用

1. @Extend

1.1 作用

对某个组件的样式属性和事件进行扩展

1.2 语法

//全局
@Extend(组件名称)
function 扩展的属性名称(参数:类型, 参数:类型,...)
{
  //编写属性和事件
}

组件名称()
  .扩展的属性名称()//调用
/*注意点：
 * 1.可以传参
 * 2.只有全局写法
 * 3.定义的名称不能和已有属性相同*/

2. @Styles

2.1 作用

对所有组件封装一个通用的属性和事件

2.2 语法

//全局写法
@Styles
function 名称(){
  //编写相关的通用属性和通用事件
}

@Entry
@Component
struct Index {
  //局部写法
  @Styles
  名称(){
    //编写相关的通用属性和通用事件
  }
  /*注意点
   * 1.不可以传参
   * 2.只能写通用属性和通用事件
   * 3.局部写法可以使用this.名称来调用*/
  build() {
    Column(){
    }
    .width('100%')
    .height('100%')
  }
}

3. @Builder

3.1 作用

可以将一段结构和样式时间封装

3.2 语法

//全局写法
@Builder
function 名称(参数:类型,参数:类型,...)
{
  //编写相关的结构、属性、事件
}

@Entry
@Component
struct Index {
  //局部写法
  @Builder
  名称(参数:类型,参数:类型,...) {
  //编写相关的结构、属性、事件
}
/*注意点
 * 1.可以传参
 * 2.局部写法可以用this.名称调用*/
build() {
  Column() {

  }
  .width('100%')
  .height('100%')
}
}

三、网格布局Grid/GridItem

1. 固定行列数量(Grid)

 columnsTemplate('1fr 1fr 1fr')//设置列
 rowsTemplate('1fr 1fr')//设置行
 columnsGap( )//设置列间距
 rowsGap( )//设置行间距

@Entry
@Component
struct Index {
  @Builder
  gridItem(text: string) {
    GridItem() {
      Text(text)
    }
    .backgroundColor(Color.Yellow)
  }
  build() {
    Column() {
      Grid() {
        this.gridItem('1')
        this.gridItem('2')
        this.gridItem('3')
        this.gridItem('4')
        this.gridItem('5')
        this.gridItem('6')
        this.gridItem('7')
        this.gridItem('8')
        this.gridItem('9')
      }
      .columnsTemplate('1fr 1fr 1fr')//设置列
      .rowsTemplate('1fr 1fr 1fr')//设置行
      .columnsGap(5)//设置列间距
      .rowsGap(5)//设置行间距
      .width('100%')
      .height(300)
      .backgroundColor(Color.Gray)
    }
    .backgroundColor(Color.Gray)
    .width('100%')
    .height('100%')
  }
}

2. 合并行列(GridItem)

columnStart( )//设置起始列
columnEnd( )//设置终点列
rowStart( )//设置起始行
rowEnd( )//设置终点行

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

  build() {
    Grid() {
      ForEach(this.nums, (item: number, index: number) => {
        //合并数字3.4
        if (index == 2) {//检索数字3的索引号2
          GridItem() {
            Text((index + 1).toString())
              .fontColor(Color.White)
              .fontSize(30)
          }
          .columnStart(2)//设置起始列，数字3所处列->第3列->索引号为2
          .columnEnd(3)//设置终点列，数字4所处列->第4列->索引号为3
          .backgroundColor('#9dc3e6')
        } 
        //合并数字4.8
        else if (index == 3) {//检索数字4的索引号3
          GridItem() {
            Text((index + 1).toString())
              .fontColor(Color.White)
              .fontSize(30)
          }
          .rowStart(1)//设置起始行，数字4所处行->第2行->索引号为1
          .rowEnd(2)//设置终点行，数字8所处行->第3行->索引号为2
          .backgroundColor('#9dc3e6')
        } 
        //合并数字8.9.10
        else if (index == 7) {//检索数字8的索引号7
          GridItem() {
            Text((index + 1).toString())
              .fontColor(Color.White)
              .fontSize(30)
          }
          .columnStart(1)//设置起始列，数字8所处列->第2列->索引号为1
          .columnEnd(3)//设置终点列，数字10所处列->第4列->索引号为3
          .backgroundColor('#9dc3e6')
        } else {
          GridItem() {
            Text((index + 1).toString())
              .fontColor(Color.White)
              .fontSize(30)
          }
          .backgroundColor('#9dc3e6')
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr 1fr')//4列
    .rowsTemplate('1fr 1fr 1fr')//3行
    .width('100%')
    .height(260)
    .rowsGap(10)
    .columnsGap(10)
    .padding(10)
  }
}

3. 设置滚动(Grid)

Grid() {
  ForEach(this.navList, (item: NavItem, index: number) => {
    GridItem() {
    }
  })
}
//✨设置竖向滚动就不能设置横向滚动，同理设置横向滚动就不能设置竖向滚动
.columnsTemplate('1fr 1fr 1fr') // 竖向滚动
.rowsTemplate('1fr 1fr') // 横向滚动

4. 代码控制滚动(GridItem)

@Entry
@Component
struct GridDemo {
  nums: number[] = Array.from({ length: 20 })
  //✨✨1.创建scroller对象
  scroller: Scroller = new Scroller()

  build() {
    Column() {
    //✨✨2.绑定scroller对象给Grid
      Grid(this.scroller) {
        ForEach(this.nums, (item: number, index: number) => {
          GridItem() {
            Text(index + 1 + '')
          }
          .backgroundColor('#0094ff')
          .width('25%')
        })
      }
      .padding(10)
      .height(250)
      .rowsGap(10)
      .columnsGap(10)
      .rowsTemplate('1fr 1fr')

      Row() {
        Button('上一页')
          .width(100)
          .onClick(() => {
          //✨✨3.调用scroller对象的scrollPage，通过代码控制
            this.scroller.scrollPage({
              next: false//上一页
            })
          })
        Button('下一页')
          .width(100)
          .onClick(() => {
            this.scroller.scrollPage({
              next: true//下一页
            })
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
    }
  }
}

5. 自定义滚动条

5.1 使用属性(Grid)

scrollBarWidth( ) // 设置宽度
scrollBarColor( ) // 设置滚动条颜色
scrollBar( ) // 设置滚动条状态，off:关闭,on:常驻,auto:按需显示(默认)

5.2 使用 ScrollBar 组件自定义

@Entry
@Component
struct Index {
//✨✨1.创建一个scroller(与Grid共用)
  scroller: Scroller = new Scroller()

  build() {
    Column() {
    //✨✨2.绑定scroller对象给Grid
      Grid(this.scroller) {
          GridItem() {
          }
      }
      //✨✨3.关闭原有滚动条
      .scrollBar(BarState.Off) 

      //✨✨4.自定义滚动条
      ScrollBar({
        scroller: this.scroller,
        direction: ScrollBarDirection.Horizontal//设置滚动方向
        state：auto//设置滚动条状态，off:关闭,on:常驻,auto:(默认)
      }) {
        //编写滚动内容
      }
      .width(200)
      .height(20)
    }
    .width('100%')
    .height('100%')
  }