HarmonyOS中的组件的滚动条说明

最新推荐文章于 2024-06-13 13:55:32 发布

萌奇.D.路飞

最新推荐文章于 2024-06-13 13:55:32 发布

阅读量940

点赞数 28

分类专栏：鸿蒙滚动条的使用说明 HarmonyOS中的滚动条组件文章标签：鸿蒙 harmonyos

本文链接：https://blog.csdn.net/zhizun95tianzi/article/details/137075202

版权

鸿蒙同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

滚动条的使用说明

1 篇文章 0 订阅

订阅专栏

HarmonyOS中的滚动条组件

1 篇文章 0 订阅

订阅专栏

滚动条的基本说明

如何控制滚动

把滚动条改为横向的滚动

滚动条的基本说明

在基本的布局组件 Column/Row/Flex/Stack中不论内容超出与否，皆不会出现滚动条

注意线性布局均不会出现滚动条

----麦克阿瑟

下面的都是会出现滚动条的组件
List(列表)
Grid
Scroll(滚动条) 谐音：死个肉

- - - 注意这个组件里面有且只能有1个组件

Swiper(轮播) 谐音：寺歪泡

然后我们出现滚动条还有一个条件，条件如下

出现滚动条的前提条件是- 上述组件中的子组件的内容超出了父容器组件的宽度或者高度

使用最基本的Scroll组件出现一个滚动条

上面这个是大部分app 的一种布局方式，一般都是再滚动区域出现的滚动条

下面我们根据这个布局先做一个类似的布局，先把布局写出来

代码如下jia


//Scroll滚动条布局的一个实例化页面
@Entry
@Component
struct ScrollCase {
  @State message: string = 'Hello World';
  @State middleHeight:number = 0

  build() {
    //先创建页面的主布局，让它沾满整个屏幕
    Column(){
      Row()
        .width('100%')
        .height(50)
        .backgroundColor(Color.Red)
      //现在中间这块区域想要沾满有两种方式
      //第一种方式是要通过计算的，方式如下
      Column(){

      }
      .width('100%')
      .height(this.middleHeight)
      .backgroundColor(Color.Brown)
      Row()
        .width('100%')
        .height(50)
        .backgroundColor(Color.Blue)
    }
    //设置它的对齐方式是平均往两边对齐，
    // 这样子两个row组件就可以一个再上面一个再下面了
    .justifyContent(FlexAlign.SpaceBetween)//设置它的对齐方式是平均往两边对齐，
    .width('100%')
    .height('100%')
    //这个属性是当我们屏幕发生变化的时候就会触发的一个事件
      //，并且我们屏幕发生变换的时候也会触发这个事件
    .onAreaChange((o:Area, newo:Area)=>{
      //咱们先把这个宽高打印一下看看，因为这个宽高是一个对象所以我们要用JSON.stringify
      //方法把它序列成字符串
      // console.log("当前的宽高",JSON.stringify(newo))
      /*
       * 得到的宽高数据如下
       * 当前的宽高 {"pos":{"x":0,"y":0},"position":{"x":0,"y":0},"globalPos":{"x":0,"y":0},"globalPosition":{"x":0,"y":0},"width":360,"height":780}
       * 我们拿到这个整体的宽高之后再减去上面的和下面的部分就是剩余的宽高了
       * */
      //因为newo.height里面的类型不是数字类型的所以这里需要转换一下
      this.middleHeight = (newo.height as number) -100
    })
  }
}

实现的一个效果

接下来就是让它上面这个代码实现可以滚动的一个效果

我们这里就用最基本的一个Scroll组件去做这个效果

实现纵向滚动的案例

这个是效果的一个图片，我们滑动的时候是可以滚动的

然后我们的实现代码如下


//Scroll滚动条布局的一个实例化页面   通过计算的一个方式
@Entry
@Component
struct ScrollCase {
  @State message: string = 'Hello World';
  @State middleHeight:number = 0

  build() {
    //先创建页面的主布局，让它沾满整个屏幕
    Column(){
      Row()
        .width('100%')
        .height(50)
        .backgroundColor(Color.Red)
      //现在中间这块区域想要沾满有两种方式
      //第一种方式是要通过计算的，方式如下
     Scroll(){//注意这个组件里面有且只能有1个组件
       Column(){
         //然后这里面就可以放n多个元素了，为了代码简化，这里面就放子组件了
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
       }
     }
      .width('100%')
      .height(this.middleHeight)
      .backgroundColor(Color.Orange)
      Row()
        .width('100%')
        .height(50)
        .backgroundColor(Color.Blue)
    }
    //设置它的对齐方式是平均往两边对齐，
    // 这样子两个row组件就可以一个再上面一个再下面了
    .justifyContent(FlexAlign.SpaceBetween)//设置它的对齐方式是平均往两边对齐，
    .width('100%')
    .height('100%')
    //这个属性是当我们屏幕发生变化的时候就会触发的一个事件，并且我们屏幕发生变换的时候也会触发这个事件
    .onAreaChange((o:Area, newo:Area)=>{
      //咱们先把这个宽高打印一下看看，因为这个宽高是一个对象所以我们要用JSON.stringify方法把它序列成字符串
      // console.log("当前的宽高",JSON.stringify(newo))
      /*
       * 得到的宽高数据如下
       * 当前的宽高 {"pos":{"x":0,"y":0},"position":{"x":0,"y":0},"globalPos":{"x":0,"y":0},"globalPosition":{"x":0,"y":0},"width":360,"height":780}
       * 我们拿到这个整体的宽高之后再减去上面的和下面的部分就是剩余的宽高了
       * */
      //因为newo.height里面的类型不是数字类型的所以这里需要转换一下
      this.middleHeight = (newo.height as number) -100
    })
  }
}
//这里面先自定义一个组件
@Component
struct ScrollItem {
  build() {
    Row(){
      Text('滚动区域内容')
    }
    .width('100%')
    .height(80)
    .backgroundColor(Color.Pink)
    //设置它的一个圆角 这个角的半径是8   也就是为了让它看起来更圆润一点
    .borderRadius(8)
    //然后设置它距离上面或者下面的一个间距
    .margin({
      top:20,
      bottom:10
    })
    .justifyContent(FlexAlign.Center)
  }
}

如何控制滚动

Scroll的滚动一般由用户的手指触发

我们也可以使用一个对象来控制滚动条这个对象叫做 scroller【谐音：死稿了】
这个对象是可以控制这个滚动条的

这个对象是先再外面定义好了之后用this的方法传到Scroll组件里面的

传进去之后我们就可以再其它地方通过点击事件去控制这个滚动条了

控制方法

this.scroller.scrollTo({xOffset:0,yOffset:100})

就是它的实例化对象里面的scrollTo方法去移动里面传的两个参数就是x轴和y轴的意思

当然除了自定义控制距离的方法以外，还有直接到顶部，或者底部的一些方法如下

this.scroller.scrollEdge(Edge.Bottom)

这个是用它实例化对象里面的scrollEdge方法里面的Edge参数是控制方向的比如说要滚到底部的话

直接用Bottom这个方法即可

针对上面的做出的实战案例如下

这个绿色框里面的点击的，也就是顶部和底部的点击的时候会移动到顶部和底部


//Scroll滚动条布局的一个实例化页面   通过计算的一个方式
@Entry
@Component
struct ScrollCase {
  @State message: string = 'Hello World';
  @State middleHeight:number = 0
  //这边定义一个Scroller对象 这个对像的类型必须是Scroller   对象名无所谓
  //因为这个对象是绑定行为的所以说不需要State来修饰
  scroller:Scroller = new Scroller()//再组件中声明一个Scroller的实例

  build() {
    //先创建页面的主布局，让它沾满整个屏幕
    Column(){
      Row()
        .width('100%')
        .height(50)
        .backgroundColor(Color.Red)
        .onClick(()=>{
          //这里创建一个事件，当他点击的时候，会控制滚动条
          // this.scroller.scrollTo({xOffset:0,yOffset:-100}) //这个是自定义控制距离
          this.scroller.scrollEdge(Edge.Bottom)
        })

      //现在中间这块区域想要沾满有两种方式
      //第一种方式是要通过计算的，方式如下
      /*这个Scroll组件再创建的时候是可以传进去一个scroller对象，
      这个对象需要创建一下再外面
      创建好对象之后传进来，然后就可以控制了
       * */
     Scroll(this.scroller){//注意这个组件里面有且只能有1个组件
       Column(){
         //然后这里面就可以放n多个元素了，为了代码简化，这里面就放子组件了
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
         ScrollItem()
       }
     }
      .width('100%')
      .height(this.middleHeight)
      .backgroundColor(Color.Orange)
      Row()
        .width('100%')
        .height(50)
        .backgroundColor(Color.Blue)
        //下面的与上面的道理相同
        .onClick(()=>{
          this.scroller.scrollEdge(Edge.Top)
        })
    }
    //设置它的对齐方式是平均往两边对齐，
    // 这样子两个row组件就可以一个再上面一个再下面了
    .justifyContent(FlexAlign.SpaceBetween)//设置它的对齐方式是平均往两边对齐，
    .width('100%')
    .height('100%')
    //这个属性是当我们屏幕发生变化的时候就会触发的一个事件，并且我们屏幕发生变换的时候也会触发这个事件
    .onAreaChange((o:Area, newo:Area)=>{
      //咱们先把这个宽高打印一下看看，因为这个宽高是一个对象所以我们要用JSON.stringify方法把它序列成字符串
      // console.log("当前的宽高",JSON.stringify(newo))
      /*
       * 得到的宽高数据如下
       * 当前的宽高 {"pos":{"x":0,"y":0},"position":{"x":0,"y":0},"globalPos":{"x":0,"y":0},"globalPosition":{"x":0,"y":0},"width":360,"height":780}
       * 我们拿到这个整体的宽高之后再减去上面的和下面的部分就是剩余的宽高了
       * */
      //因为newo.height里面的类型不是数字类型的所以这里需要转换一下
      this.middleHeight = (newo.height as number) -100
    })
  }
}
//这里面先自定义一个组件
@Component
struct ScrollItem {
  build() {
    Row(){
      Text('滚动区域内容')
    }
    .width('100%')
    .height(80)
    .backgroundColor(Color.Pink)
    //设置它的一个圆角 这个角的半径是8   也就是为了让它看起来更圆润一点
    .borderRadius(8)
    //然后设置它距离上面或者下面的一个间距
    .margin({
      top:20,
      bottom:10
    })
    .justifyContent(FlexAlign.Center)
  }
}

把滚动条改为横向的滚动

改为横向的滚动只需要将纵向的布局改成横向的就行了

也就是把Scroll的滚动方向调节成横向即可

因为这个Scroll组件的滚动条默认是上下滚动的，如果想要把它换成左右滚动的话，就需要用到

scrollable这个属性了然后这个属性里面的ScrollDirection这个参数是控制它滚动的一个方向，然后让他往那个方向移动的可以看下面的那个表

scrollable里面的方向

Vertical	竖直的
Horizontal	横向的
Free
None

下面是一个横向布局的一个小案例

效果图如下

功能讲解

里面的组件是可以左右两边去滚动的

然后有两个按钮点击的时候是可以滚动到最左边或者右边的相应位置的

@Entry
@Component
struct ScrollCase02 {
  @State message: string = 'Hello World'

  scroller:Scroller = new Scroller()
  build() {
    Row() {
      Column(){
        //有且只用一个插件
        Scroll(this.scroller){
          //里面有且只用一个组件
          Row({space:20}){
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
            Actor()
          }

        }
        .height(200)
        .width('100%')
        .backgroundColor(Color.Orange)
        .scrollable(ScrollDirection.Horizontal)
        //
        Row(){
          Button('滚到左边')
            .onClick(()=>{
              this.scroller.scrollEdge(Edge.Start)
            })
          Button('滚到右边')
            .onClick(()=>{
              this.scroller.scrollEdge(Edge.End)
            })
      }
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Pink)
  }
}
@Component
struct Actor {
  build() {
    Row(){
      Text('热辣滚烫-贾玲')
        .fontColor(Color.White)
    }
    .width(100)
    .height(180)
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Red)
  }
}

注意我们设置滚动条的时候子元素一定不要设置高度，不然的话加载不出来这个滚动条