【HarmonyOS NEXT星河版开发学习】综合测试案例-拼夕夕首页

前言

该实战案例并没有用到太多的知识点，只不过用到的一些新东西，要多花时间去熟悉手机app的一些页面，对开发很有帮助。

构建思路

主体部分由五张图片所构成

滑动一定距离后

界面讲解

布局

Scroll的应用

返回顶部

知识点概述

Scroll组件是鸿蒙应用开发中的一个重要元素，用于在布局尺寸超过父组件尺寸时提供滚动功能。Scroll组件作为鸿蒙OS开发中的一个重要组成部分，主要负责处理内容显示中的滚动需求。当一个容器的内容或者子组件超出了容器的可视范围时，Scroll组件就发挥其作用，使得内容能够通过滚动的方式被用户访问到。

从Scroll组件的功能性来看。Scroll组件的设计初衷是为了解决内容展示空间有限的问题。当内容的布局尺寸超过其父组件尺寸时，Scroll组件便提供了滚动的能力，使得用户可以在有限的窗口中浏览更多的信息。这种机制广泛应用于移动应用中的长列表、横向图集等场景。

Scroll组件支持的滚动方向和自定义属性也是开发者需要关注的点。根据文档，Scroll组件可以通过scrollable属性设置滚动方向，包括水平滚动（Horizontal）、竖直滚动（Vertical）以及不可滚动（None）。除了滚动方向，Scroll组件还提供了诸如scrollBar、scrollBarColor、scrollBarWidth等属性，允许开发者对滚动条的显示状态、颜色及宽度进行个性化定制。

Scroll组件与滚动控制器Scroller的结合使用，为开发者提供了更为灵活的滚动控制能力。通过Scroller，开发者可以实现将滚动容器定位到特定位置、滚动到边界等操作。例如，scrollTo方法允许开发者设置滚动容器快速定位到指定的位置，而scrollPage方法则能够实现按页滚动的功能。这些方法和属性的结合使用，大大增强了滚动组件的功能性和交互性。

Scroll组件的高级应用也体现了鸿蒙开发框架的强大之处。例如，通过设置scrollSnap属性，可以实现限位滚动，即在滚动过程中，内容会根据设定的点对齐，适用于轮播图或者分页内容的场景。此外，嵌套滚动选项nestedScroll能够让Scroll组件与其他滚动组件（如List）结合，实现更为复杂的滚动联动效果。

Scroll组件不仅为鸿蒙应用的内容展示提供了基础的滚动功能，同时通过丰富的属性和方法，为开发者提供了高度定制化和动态控制的能力。在应用开发过程中，合理利用Scroll组件及其相关特性，将有助于实现更流畅的用户交互体验和更高效的信息展示。因此，深入理解和灵活运用Scroll组件，对于追求卓越用户体验的鸿蒙应用开发者来说，是一项不可或缺的技能。

代码展示

@Entry
@Component
struct Index {
  // 1.创建Scroll实例对象
  myScroll:Scroller=new Scroller()

  num:number[]=[2,3,4,5]
  // 实时保存y轴滚动的距离
  @State yoffset:number=0
  build() {
    Column(){
      // 层叠布局
      Stack({alignContent:Alignment.BottomEnd}){
        // 滚动区域
        // 2.和Scroller容器绑定
        Scroll(this.myScroll){
          Column(){
            ForEach(this.num,(item:number)=>{
              Image($r(`app.media.pdd_img0${item}`))
                .width('100%')
            })
          }
        }
        .onScroll(()=>{
          this.yoffset=this.myScroll.currentOffset().yOffset
        })
        if(this.yoffset>200){
          // 返回顶部
          Column(){
            Image($r('app.media.ic_top'))
              .width(50)
            Text('返回顶部')
              .fontSize(12)
          }
          .backgroundColor(Color.White)
          // 3.调用实例方法
          .onClick(()=>{
            this.myScroll.scrollEdge(Edge.Top)
          })
          .position({x:'85%',y:'80%'})
        }
        // 底部区域
        Image($r('app.media.pdd_img01'))
          .width('100%')

      }
    }
  }
}