scroll滚动

@Entry
@Component
struct ScrollView {
  // 添加一个全局的scroller 用于传递给视图中的scroll进行相互绑定 然后就可以监听它相关的属性状态
  scroller: Scroller = new Scroller() 
  @State isShowScrollTop: boolean = false

  build() {
    Column() {
      Stack() {
        Scroll(this.scroller) {
          Column({ space: 12 }) {
			// 通过for循环创建20个数组长度的模拟数据
            ForEach(Array.from({ length: 20 }), (item: number, index) => {
              Text(`测试文字 ${index}`)
              .setMaxWidth()
              .height(100)
              .backgroundColor(Color.Orange)
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
              .fontColor(Color.White)
              .textAlign(TextAlign.Center)
              .borderRadius(12)
            })
          }
          .margin({ left: 12, right: 12 })
        }
        .setMaxWidth()
        .height('100%')
        .scrollable(ScrollDirection.Vertical) // 滚动的方向
        .scrollBar(BarState.Auto) // 滚动条是否要展示
        .edgeEffect(EdgeEffect.Spring) // 弹性动画效果
		// 该方法已经在最新的next版本中被禁用了
        // .onScroll((x,y) => { 
        //
        // })
		// 通过这个方法就可以监听当前滚动偏移量
        .onDidScroll(() => {
          console.log(this.scroller.currentOffset().yOffset.toFixed(2));
        })

        Button('点击我滚动到最上面').onClick((event: ClickEvent) => {
		  // 直接让scroller滚动到顶部 Edge是枚举 可以选组不同的方位
          this.scroller.scrollEdge(Edge.Top)
        })
          .offset({x:-20, y: -20})
          // .position({
          //   x: -20,
          //   y: -20
          // })

        Button('获取滚动距离').onClick((event: ClickEvent) => {
		  // 通过绑定的scoller 获取当前滚动的偏移量
          let x = this.scroller.currentOffset().xOffset
          let y = this.scroller.currentOffset().yOffset.toFixed(2)
          AlertDialog.show({
            message: `x:${x},y:${y}`
          })
        })
      }
    }
    .setMaxWidth()
  }
}

@Styles
function setMaxWidth() {
  .width('100%')
}

tabs支持多种布局样式 具体的可以看下图 就不一一列举了