鸿蒙Scroll布局,横向与纵向

注意，当横向scroll时，直接子元素的宽，不能100%，

当纵向scroll时，直接子元素的高，不能100%

1、纵向代码：

方法1：用数值计算，来设置中间的高度：

复制代码

@Entry
@Component
struct ScrollCase {
  @State message: string = 'Hello World';
  @State middleHeigh: number = 0;

  build() {

    Column() {
      Row() {

      }
      .height(50)
      .width('100%')
      .backgroundColor(Color.Blue)

      Column(){

      }
      .width('100%')
      .height(this.middleHeigh)
      .backgroundColor(Color.Orange)

      Row() {

      }
      .height(50)
      .width('100%')
      .backgroundColor(Color.Red)
    }
    .justifyContent(FlexAlign.SpaceBetween) //两端对齐
    .width('100%')
    .height('100%')
    .onAreaChange((old: Area, newArea: Area) => { //界面渲染时会被调用
      this.middleHeigh=(newArea.height as number) - 100
    })
  }
}

效果：

完全效果：

代码：

复制代码

@Entry
@Component
struct ScrollCase {
  @State message: string = 'Hello World';
  @State middleHeigh: number = 0;
  scroller:Scroller =new Scroller()
  build() {

    Column() {
      Row() {

      }
      .height(50)
      .width('100%')
      .backgroundColor(Color.Blue)
      .onClick(()=>{
        this.scroller.scrollEdge(Edge.Bottom)
      })

      Scroll(this.scroller){
        Column(){
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
        }
      }
      .scrollBarColor(Color.Red)

      .width('100%')
      .height(this.middleHeigh)
      .backgroundColor(Color.Orange)

      Row() {
      }
      .height(50)
      .width('100%')
      .backgroundColor(Color.Red)
      .onClick(()=>{
        this.scroller.scrollEdge(Edge.Top)
      })
    }
    .justifyContent(FlexAlign.SpaceBetween) //两端对齐
    .width('100%')
    .height('100%')
    .onAreaChange((old: Area, newArea: Area) => { //界面渲染时会被调用
      this.middleHeigh=(newArea.height as number) - 100
    })
  }
}

@Component
struct ScrollItem {
  build() {
    Row(){
      Text("滚动区域内容")
        .backgroundColor(Color.White)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(80)
    .backgroundColor(Color.Pink)
    .margin(10)
  }
}

Scroller对Scorll进行控制滑动到顶、或底

2、横向滚动，效果：

代码：

复制代码

@Entry
@Component
struct ScrollCase02 {
  @State message: string = 'Hello World';
  scroller: Scroller = new Scroller()

  build() {
    Column() {
      Scroll(this.scroller) {
        Row({ space: 20 }) {
          Actor()
          Actor()
          Actor()
          Actor()
          Actor()
          Actor()
          Actor()
          Actor()
          Actor()

        }
        .height(200)
        .backgroundColor(Color.Orange)
      }
      .height(200)
      .width('100%')
      .backgroundColor(Color.Pink)
      .scrollable(ScrollDirection.Horizontal)
      Row() {
        Button("滚动左边")
          .onClick(() => {
            this.scroller.scrollEdge(Edge.Start)
          })
        Button("滚动右边")
          .onClick(() => {
            this.scroller.scrollEdge(Edge.End)
          })
      }

    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Pink)



  }
}

@Component
struct Actor {
  build() {
    Row() {
      Text("热辣滚烫--贾玲")
        .fontColor(Color.White)
    }
    .width(100)
    .height(180)
    .backgroundColor(Color.Red)
  }
}