鸿蒙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小助手18 小时前
HEIF:更高质量、更小体积,开启 HarmonyOS 图像新体验
harmonyos·鸿蒙·鸿蒙生态
leon_teacher5 天前
ArkUI核心功能组件使用
android·java·开发语言·javascript·harmonyos·鸿蒙
开发小能手嗨啊5 天前
鸿蒙开发进阶(HarmonyOS)
harmonyos·鸿蒙·鸿蒙开发·开发教程·纯血鸿蒙·南向开发·北向开发
HarmonyOS小助手5 天前
CodeGenie 的 AI 辅助调优让你问题定位效率大幅提升
harmonyos·鸿蒙·鸿蒙生态
HarmonyOS小助手5 天前
《音频焦点管理》最佳实践:让鸿蒙应用中的每一段声音,都不被打扰
harmonyos·鸿蒙·鸿蒙生态
HarmonyOS小助手6 天前
H5 页面加载终于不转圈了!FastWeb 组件让加载快到起飞
harmonyos·鸿蒙·鸿蒙生态
卖n-bomb的小男孩7 天前
鸿蒙地址选择库(ArkTs UI)
鸿蒙
森之鸟7 天前
鸿蒙创新赛活动——Mac提交压缩失败后续
macos·鸿蒙
开发小能手嗨啊7 天前
「鸿蒙系统的编程基础」——探索鸿蒙开发
harmonyos·鸿蒙·鸿蒙开发·开发教程·纯血鸿蒙·南向开发·北向开发