鸿蒙开发 - Scroll组件

自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式。

1.在List中添加滚动条：当List子项过多一屏放不下时，可以将每一项子元素放置在不同的组件中，通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到内容最末端的回弹效果。

2.使用Scroll组件：在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。

垂直方向布局Column中使用Scroll组件

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Scroll(this.scroller) {
      Column() {
        ForEach(this.arr, (item) => {
          Text(item.toString())
            .width('90%')
            .height(150)
            .backgroundColor(0xFFFFFF)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        }, item => item)
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}

弹性布局Flex中使用Scroll组件

@Entry
@Component
struct StackSample {
  private arr: string[] = ["APP101", "APP102", "APP103", "APP104", "APP105", "APP106", "APP107", "APP108", "APP109", "APP110", "APP111", "AP112", "APP113", "APP114", "APP1115", "APP116", "APP117", "APP118", "APP119", "APP120", "APP121", "APP122", "APP123", "APP124", "APP125", "APP126", "APP127"];
  private scroller: Scroller = new Scroller();
  private space: number = 10;

  // 计算高度
  getHeight(): number {
    var height = (this.arr.length / 3.0);
    // 取余=0
    if (height == 0) {
      height = height * (100 + this.space);
    } else {
      height = (height + 1) * (100 + this.space);
    }
    return height;
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Scroll(this.scroller) {
        Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Column }) {
          ForEach(this.arr, (item) => {
            Text(item)
              .width(100)
              .height(100)
              .fontSize(16)
              .margin(this.space)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }, item => item)
        }.width('100%').height(this.getHeight())
      }
      .backgroundColor(0xDCDCDC)
      .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
      .scrollBar(BarState.On) // 滚动条常驻显示
      .scrollBarColor(Color.Gray) // 滚动条颜色
      .scrollBarWidth(5) // 滚动条宽度
      .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹

      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        Text('联系人').fontSize(16)
        Text('设置').fontSize(16)
        Text('短信').fontSize(16)
      }
      .width('50%')
      .height(50)
      .backgroundColor('#16302e2e')
      .margin({ bottom: 15 })
      .borderRadius(15)
    }.width('100%').height('100%').backgroundColor('#CFD0CF')
  }
}

两者区别：Column或Row使用Scroll时，会自动计算容器容量高度，可以直接滑动到最底部；而Flex使用Scroll时，需要计算height属性的具体的值，Flex的direction默认是横向的，如果使用 .height('100%') ，会出现滑不到最底部的情况，只能出现一屏数据，所以需要使用 direction: FlexDirection.Column，然后手动计算出高度.height(this.getHeight())，然后再预览就可以滑到底部了。