鸿蒙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)
  }
}
相关推荐
HarmonyOS小助手1 小时前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
KillerNoBlood2 小时前
HarmonyOS学习4 --- 创建一个页面
arkts·鸿蒙
keepDXRcuriosity6 小时前
鸿蒙应用开发课设——鸿蒙青藤社
harmonyos·鸿蒙
伍哥的传说2 天前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
伍哥的传说2 天前
鸿蒙系统(HarmonyOS)经典红色风格登录页布局
前端·华为·harmonyos·鸿蒙·鸿蒙系统
伍哥的传说3 天前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
HarmonyOS小助手14 天前
京东正式开源Taro on HarmonyOS C-API 版本,为鸿蒙应用跨端开发提供高性能框架
harmonyos·鸿蒙·harmonyos next·harmonyos 5.0·鸿蒙5·鸿蒙生态
在人间耕耘15 天前
鸿蒙云函数与云数据库开发实践
鸿蒙
呆dai~17 天前
基于原生能力的键盘控制
harmonyos·鸿蒙
知然21 天前
鸿蒙 Native API 的封装库 h2lib_arkbinder
c++·arkts·鸿蒙