鸿蒙深入的第一次总结

scroll

scroll 滚轮外部给一个容器，内部只有一个子组件可滚动的容器组件，当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。

scrolld的属性

scrollable参数：ScrollDirection 设置滚动方向。 ScrollDirection.Vertical 纵向 ScrollDirection.Horizontal 横向

edgeEffect （参数）value:EdgeEffect 设置边缘滑动效果。 EdgeEffect.None 无 EdgeEffect.Spring 弹簧 EdgeEffect.Fade 阴影

scroll控制器

scrollBar BarState 设置滚动条状态。 scroll的控制器

实例化 Scroller的控制器
绑定给 Scroll
调用控制器的方法控制滚动，通过控制器的属性获取滚动距离

1.scroller: Scroller = new Scroller()
2.scroll(this.scroller)
3.给一个点击事件
this.scroller.scrollEdge.(Edge.top)
___________________________
同样this.srcoller也可获得滑动的距离
const x:this.scroller.currentOffset().xOffset
const y:this.scroller.currentOffset().yOffset
//可实时获得滚动的距离
.onWillScroll(() => {
        console.log(this.scroller.currentOffset().yOffset + '')
      })
      
案例.onScroll((x, y) => {
          if( this.sc.currentOffset().yOffset>400){
            this.showRocket=true
          }else{
            this.showRocket = false
          }
}）
  超过滑动距离400，可显示

swiper

Swiper() { // 轮播内容 // (设置尺寸，撑开swiper) } // 设置尺寸（内容拉伸、优先级高） .width('100%') .height(100)

swiper属性 loop 是否开启循环，默认true autoPlay 是否自动播放默认false interval 播放时间
vertical 是否纵向，默认false

轮播图的标属性 indicator

DotIndicator：圆点指示器样式。
DigitIndicator：数字指示器样式。
boolean：是否启用导航点指示器。默认值：true

默认类型：DotIndicator
.indicator(
    Indicator.dot() // 圆点
      .selectedColor(Color.White) // 选中颜色
      .selectedItemWidth(30) // 选中宽度
      .selectedItemHeight(4) // 选中高度
      .itemWidth(10) // 默认宽度
      .itemHeight(4) // 默认宽度
      //位置
      .left(0)
      .top(0)
  )

swiper的控制器

核心步骤 3：
1. 实例化控制器    controller: SwiperController = new SwiperController()
2. 设置给 Swiper           Swiper(this.controller)
3. 调用控制器方法 
        Button('上一页')
          .onClick(() => {
            this.controller.showPrevious()
          })
        Button('下一页')
          .onClick(() => {
            this.controller.showNext()
          })

Grid网格布局

Grid() {
 GridItem(){
   // 展示的内容放在这里
 }
 GridItem(){
   // 展示的内容放在这里
 }//这个是父亲化为的一小块的大小
}
.width('100%')
.columnsTemplate('1fr 1fr 1fr')//分列//只设这个时，竖向滑动
.rowsTemplate('1fr 1fr 1fr')//分行//只设这个时，横向滑动
.columnsGap//列间距
.rowsGap//行间距

日常开发中除了大小相同的等比例网格布局，由不同大小的网格组成不均匀分布的网格布局场景在实际应用中也十分常见，如下图所示。

| rowStart    |
| rowEnd      |
| columnStart |
| columnEnd   |
//案例::
if (index === 2) {
          GridItem() {
            Text(index + '')
              .fontColor(Color.White)
              .fontSize(30)
          }
          .backgroundColor('#9dc3e6')
          .columnStart(3)
          .columnEnd(4)//合并3，4列
        } else if (index === 3) {
          GridItem() {
            Text(index + '')
              .fontColor(Color.White)
              .fontSize(30)
          }
          .backgroundColor('#9dc3e6')
          .rowStart(2)
          .rowEnd(3)//同理合并2，3行

总结

Scroll、List、Grid三者都可以使内容形成滚动展示的效果;
Scroll组件更多用于多个区域的整体滚动效果,比如京东首页的整体滚动区域;
List多用于排列规整的产品列表区域, 例如qq音乐的排行榜区域;
Grid组件多用于排列规整的分栏区域,类似于导航进入不同的频道,例如京东的分栏区域.

深入探索鸿蒙