Swiper 轮播图 Grid：网格 创建对象scroller @Extend @Extend @Builder 自定义滚动条

用户56505395184
92 阅读6分钟

本章全部内容 Swiper 轮播图 Grid：网格 创建对象scroller @Extend @Extend @Builder 自定义滚动条

swipe

  • [说明] Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后， 内容本身尺寸大于swipe的本身尺寸就能够自动提供滑动轮播能力。
@Entry
@Component
struct Index {
  build() {
    Column() {
    //swiper里面可以有多个组件存在
      Swiper(){
        Text('内容')
        Text('内容')
        Text('内容')
        Text('内容')
        Text('内容')
        Text('内容')
        Text('内容')
        Column(){}
        Row(){}
        List(){}
        Flex(){}
      }
      //设置swiper的尺寸
      .width('100%')
.height(100)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)

  }
}
  • [属性]

image.png

举例

  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(160)
  .autoPlay(true)//设置组件是否自动轮播 默认false
  .interval(1000)//设置组件轮播事件间隔 默认2000ms
  .vertical(true)//设置组件纵向滑动 默认false

调整导航点

说明

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

  1. 显示 or 隐藏
  2. 导航点类型：
    1. 圆点（掌握）
    2. 数字（了解）
    3. 确定类型之后，调整位置及外观

属性

image.png

位置

image.png

位置

image.png

用法

Swiper(){
text（）
}
// .indicator(false) // 关闭导航
// .indicator(Indicator.dot()) // 圆点指示器（默认）
// .indicator(Indicator.digit()) // 数字指示器

圆点举例

Swiper() {
     // 略
  }
  .width('100%')
  .height(160)
  .indicator(
    Indicator.dot() // 圆点
      .selectedColor(Color.White) // 选中颜色
      .selectedItemWidth(30) // 选中宽度
      .selectedItemHeight(4) // 选中高度
      .itemWidth(10) // 默认宽度
      .itemHeight(4) // 默认宽度
      .color(color.red)//导航点的颜色
      
  )

扩展页面翻页方式

image.png

代码举例

@Entry
@Component
struct SwiperDemo {
  // 1.创建控制器对象控制器的名称自己取
  controller: SwiperController = new SwiperController()

  build() {
    Column({ space: 10 }) {
      // 2. 将创建的控制器设置给 Swiper
      Swiper(this.controller) {
           text()
      }
      Row() {
        Button('上一页')//设置按钮
          .onClick(() => {       //创建点击事件
            // 3.调用控制器的方式实现切换效果 
            this.controller.showPrevious()  //showPrevious() 上一页   showNext()  下一页
          })
        Button('下一页')
          .onClick(() => {
            this.controller.showNext()
          })
      }

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

    // .padding(20)
  }
}

样式结构&重用

3 种样式&结构复用的语法：

  1. @Extends：扩展组件（样式、事件）

  2. @Styles: 抽取通用属性、事件

  3. @Builder：自定义构建函数（结构、样式、事件）

2.1. @Extends：扩展组件（样式、事件）

说明只能给某一个组件扩展 可以传参 定义在全局

比如给text组件扩展

// 定义在全局
@Extend(Text) 
function functionName(size:number) {
  .fontSize(size)
  .onClick(()=>{})
}


// 使用
Text()
  .functionName(10)

经常出现的场景比如

@Entry
@Component
struct Extends_demo {
  @State message: string = '样式&结构重复使用';

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Swiper() {
        Text('0')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Red)//一个参数
          .fontColor(Color.White)
          .fontSize(30)

          .onClick(() => {
            AlertDialog.show({
              message: '轮播图 1'  //第二个参数
            })
          })
        Text('1')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Green)
          .fontColor(Color.White)
          .fontSize(30)
          .onClick(() => {
            AlertDialog.show({
              message: '轮播图 2'
            })
          })
        Text('2')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Blue)
          .fontColor(Color.White)
          .fontSize(30)
          .onClick(() => {
            AlertDialog.show({
              message: '轮播图 3'
            })
          })
      }
      .width('100%')
      .height(160)
    }
    .width('100%')
    .height('100%')
  }
}

//创建函数  两个参数
@Extend(Text)
function textExtend(backgroudColor: ResourceColor, info: string) {
  .textAlign(TextAlign.Center)
  .backgroundColor(backgroudColor)
  .fontColor(Color.White)
  .fontSize(30)
  .onClick(() => {
    AlertDialog.show({
      message: info
    })
  })
}

/////修改后
  build() {
    Column({ space: 10 }) {
      Text(this.message)
        .fontSize(30)
      Swiper() {
        Text('0')
          .textExtend(Color.Red, '轮播图 1')
        Text('1')
          .textExtend(Color.Green, '轮播图 2')
        Text('2')
          .textExtend(Color.Blue, '轮播图 3')
      }
      .width('100%')
      .height(160)
    }
    .width('100%')
    .height('100%')
  }
}

2.1 Styles

说明：@Styles扩展通用样式和事件给多个组件使用 可以定义在全局或者组件内定义 不能传递参数 但是可以继续添加样式 组件内的样式会覆盖全局的样式

// 全局定义
@Styles function 函数名称（）{
{
.通用属性()
  .通用事件(()=>{})}
  }
  
}// 组件内定义去掉function即可

使用

//组件外的创建 @Styles
@Styles function ss(){
  .width('100%)
  .height('100%')
}
@Entry
@Component
struct Index {
  @State gaoliang: number = 0
  // 组件内的创建 @Styles 如果组件内与组件外有同一属性 组件内的会把全局的覆盖掉
@Styles sc(){
    .backgroundColor(Color.Pink)
}
  @Builder
  build() {
    Column() {
     Text('')//原本的参数 .width(100)   .height(100)    .backgroundColor(Color.Pink)
       .ss()
       .sc()
    }
  .ss
 .sc          /////tyles  可以给text 也可以给column

  }
}

## 2.3. @Builder

说明：如果连结构也需要抽取，就可以使用@Builder，他也可以叫做 自定义构建函数

语法

自定义 全局 构建函数
@Builder function 函数名称(param1,param2...) {
   结构、属性、事件放这里
}
 使用 全局的在使用的时候不需要加this
MyGlobalBuilderFunction(param1,param2...)

自定义 组件内 构建函数 组件的不需要加 functio 在使用的时候要加this
@Builder MyBuilderFunction( param1,param2...) {
  // 结构、属性、事件放这里
}
 使用
this.MyBuilderFunction(param1,param2...)

使用

Column({ space: 10 }) {
            Image($r('app.media.ic_reuse_04'))
              .width('80%')
            Text('阿里药房')

          }
          .width('25%')
          .onClick(() => {
            AlertDialog.show({
              message: '点了 阿里药房'
            })
          })
        }
//上面是原来的函数

// 创建全局函数 依据上方的原本函数来创建@Builder并设置参数
@Builder
function navItem(icon: ResourceStr, text: string) {
  Column({ space: 10 }) {
    Image(icon)
      .width('80%');
    Text(text);
  }
  .width('25%')
  .onClick(() => {
    AlertDialog.show({
      message: '点了' + text
    })
  })
}

@Entry
@Component
struct Day01_04_Builder {
  @State message: string = '@Builder';

  build() {
    Column({ space: 20 }) {
      Text(this.message)
        .fontSize(30)

      Row() {
        // 这个使用全局的
      navItem($r('app.media.ic_reuse_04'), '阿里药房')
      // 如果是组件内的话  
      this. navItem($r('app.media.ic_reuse_04'), '阿里药房')
      }
    }
    .width('100%')
    .height('100%')
  }

网格布局Grid/GridItem

说明

如果布局是由 很多的 行 和 列 所组成、行列可能需要合并、甚至滚动，就可以使用网格布局来实现 多与foreach 和@Builder一起应用渲染

image.png

参数

image.png

举例

@Entry
@Component
struct Index {
  @Builder
  build() {
    Column() {
    Grid(){
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
      GridItem(){
        Text('五年了哦买噶')
      }
    }.columnsTemplate('1fr 1fr')  //设置列数  //如果值单独设置.columnsTemplate('1fr 1fr') 就在列上有列数 然后产生滚动效果 前提是超过当前容器的尺寸
      .rowsTemplate('1fr 1fr ')//设置行数  //单独设置行数也可以产生滚动效果 前提是超过当前容器的尺寸
      .rowsGap(10） ///设置行与行之间的间距
      .columnsGap(10)//设置列于列之间的间距
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)

  }
}

代码控制滚动

image.png

@Entry
@Component
struct GridDemo {

// 快速创建数组的方法 但是数组内部为空
  nums: number[] = Array.from({ length: 200 })
  
  
  // 创建 Scroller对象
  scroller: Scroller = new Scroller()

  build() {
    Column() {
      Grid(this.scroller) {                //设置给Grid
        ForEach(this.nums, (item: number, index: number) => {
          GridItem() {
            Text(index + 1 + '')
          }
          .backgroundColor('#0094ff')
          .width('25%')
        })
      }
      .padding(10)
      .height(450)
      .rowsGap(10)
      .columnsGap(10)
      .rowsTemplate('1fr 1fr 1fr 1fr')
 //
      Row() {
        Button('上一页')
          .width(100)
          .onClick(() => {
            this.scroller.scrollPage({   
              next: false
            })
          })
        Button('下一页')
          .width(100)
          .onClick(() => {
            this.scroller.scrollPage({          //调用scroller对象的方法.scrollPage({next:true})
              next: true
            })
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround)
    }
  }
}

自定义滚动条

调整本身自带的属性条只能调整基础

image.png

用法
@Entry
@Component
struct Index {
  @Builder
  build() {
    Column() {
      Grid() {
        GridItem() {
          Text('五年了哦买噶')
        }
      }
      .columnsTemplate('1fr 1fr')   ///设置列的列数不设置行数代表自带滚动
      .scrollBarWidth(10) ///宽度
      .scrollBarColor(Color.Red)// 设置滚动条的颜色

      .scrollBar(BarState.On) ///设置滚动条的状态 显示 关闭 或者点击显示 不点击几秒后隐藏
      .rowsGap(10) ////行与行之间的间隔
      .columnsGap(10)//列与列之间的间隔
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)

  }
}

3.7.2. 使用 ScrollBar 组件自定义

image.png

用法

@Styles
function ss() {
  .width(100)
  .height(100)
}

@Entry
@Component
struct Index {

  scroller:Scroller=new Scroller()    ////创建一个scroller
  
  @Builder
  build() {
    Column() {
      Grid(this.scroller) {      ////放到Grid的参数中
        GridItem() {
          Text('五年了哦买噶')
            .fontSize(50)
        }
      }
      .width('100%')
      .height(300)
      .rowsTemplate('1fr 1fr')
      .scrollBarWidth(10)
      .rowsGap(10)
      .columnsGap(10)
      
      // .scrollBarColor(Color.Red)
      .scrollBar(BarState.Off)   //关闭本身的滚动条
      
      /// 自定义设置滚动条
     ScrollBar({
       scroller:this.scroller,  
       direction:ScrollBarDirection.Horizontal  //滚动条方向
     }){
     ////////////////           自定义滚动条宽度 背景颜色 高度
     Column(){}
        .width(40)
        .height(20)
        .backgroundColor(Color.Pink)
     }.width(200)
      .height(30)
      .backgroundColor(Color.Red)
//////////////////

    }
    .width('100%')
    .height('100%')
avatar
文章
阅读
粉丝