鸿蒙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)
  }
}
相关推荐
迷曳14 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker14 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
冰天糖葫芦3 天前
鸿蒙Next原生应用开发AES加解密
鸿蒙·aes加解密
SuperHeroWu74 天前
【HarmonyOS】元服务入门详解 (一)
华为·harmonyos·鸿蒙·元服务·卡片·免安装
SuperHeroWu74 天前
【HarmonyOS】元服务概念详解
华为·harmonyos·鸿蒙·概念·元服务·详解
weixin_541299944 天前
鸿蒙应用开发: 鸿蒙项目中使用私有 npm 插件的完整流程
华为·npm·harmonyos·鸿蒙
HarmonyOS小助手9 天前
从航旅纵横到东南亚Grab:鸿蒙生态的“星辰大海”,由开发者共绘
harmonyos·鸿蒙·鸿蒙生态
逻极9 天前
HarmonyOS从入门到精通:自定义组件开发指南(二):组件属性与参数传递
华为·harmonyos·arkts·鸿蒙·自定义组件
HarmonyOS小助手10 天前
在鸿蒙中造梦的开发者,一边回答,一边前行
harmonyos·鸿蒙·harmonyos next·鸿蒙生态