应用在折叠屏展开态下，页面展示的内容比例变大
======================

#### 问题现象

应用在折叠屏展开态下运行时，页面展示的内容占比过大，导致比在折叠屏折叠态下运行时显示数量更少。

#### 背景知识

*   [WaterFlow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-waterflow)：瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。
*   [display.on('foldDisplayModeChange')](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-display#displayonfolddisplaymodechange10)：开启折叠设备屏幕显示模式变化的监听。

#### 问题定位

1.  检查代码中WaterFlow的配置项columnsTemplate设置值是否固定为两列。
2.  检查代码中瀑布流内容宽高是否按百分比显示。

#### 分析结论

应用使用瀑布流布局，固定了两列显示，导致在折叠屏展开态下，内容宽高按比例放大，但依旧两列显示，对比折叠屏折叠态内容数量反而变少。

#### 修改建议

使用display.on('foldDisplayModeChange')监听折叠屏折叠与展开，动态调整WaterFlow瀑布流布局的列数。

import { display } from '@kit.ArkUI';
import { cryptoFramework } from '@kit.CryptoArchitectureKit';

enum FooterState {
  Loading = 0,
  End = 1
}

@Entry
@Component
struct WaterFlowDemo {
  private minSize: number = 80;
  private maxSize: number = 180;
  @State colors: number\[\] = \[0xD1D1D6, 0xE5E5EA, 0xFFFFFF, 0x808080\];
  @State footerState: FooterState = FooterState.Loading;
  scroller: Scroller = new Scroller();
  dataSource: WaterFlowDataSource = new WaterFlowDataSource();
  private itemWidthArray: number\[\] = \[\];
  private itemHeightArray: number\[\] = \[\];
  @State columnsTemplate: string = '1fr 1fr';

 _ // 计算FlowItem宽/高_
  getSize() {
    let rand = cryptoFramework.createRandom();
  _  // 设置生成随机数的字节长度为1_
    let randData = rand.generateRandomSync(1);
   _ // 自定义范围(0-10之内)_
    let num: number = randData.data\[0\] / 255;
    let ret = Math.floor(num \* this.maxSize);
    return (ret > this.minSize ? ret : this.minSize);
  }

 _ // 设置FlowItem的宽/高数组_
  setItemSizeArray() {
    for (let i = 0; i < 100; i++) {
      this.itemWidthArray.push(this.getSize());
      this.itemHeightArray.push(this.getSize());
    }
  }

  aboutToAppear() {
    let callback: Callback<display.FoldDisplayMode> = (data: display.FoldDisplayMode) => {
     _ // 监听到是折叠屏展开态_
      if (data === 1) {
      _  // 修改瀑布流列数为4列，展示更多数据_
        this.columnsTemplate = '1fr 1fr 1fr 1fr';
      }
    };
    display.on('foldDisplayModeChange', callback);
    this.setItemSizeArray();
  }

  @Builder
  itemFoot() {
    Column() {
      if (this.footerState === FooterState.Loading) {
        Text(\`加载中...\`)
          .fontSize(10)
          .backgroundColor(Color.Red)
          .width(50)
          .height(50)
          .align(Alignment.Center)
          .margin({ top: 2 });
      } else if (this.footerState === FooterState.End) {
        Text(\`到底啦...\`)
          .fontSize(10)
          .backgroundColor(Color.Red)
          .width(50)
          .height(50)
          .align(Alignment.Center)
          .margin({ top: 2 });
      } else {
        Text(\`Footer\`)
          .fontSize(10)
          .backgroundColor(Color.Red)
          .width(50)
          .height(50)
          .align(Alignment.Center)
          .margin({ top: 2 });
      }
    };
  }

  build() {
    Column({ space: 2 }) {
      WaterFlow({ footer: this.itemFoot() }) {
        LazyForEach(this.dataSource, (item: number) => {
          FlowItem() {
            Column() {
              Text('N' + item).fontSize(12).height('50');
            };
          }
          .width('100%')
          .height(this.itemHeightArray\[item % 100\])
          .backgroundColor(this.colors\[item % 4\]);
        }, (item: string) => item);
      }
      .columnsTemplate(this.columnsTemplate)
      .columnsGap(10)
      .rowsGap(5)
      .backgroundColor(0xFAEEE0)
      .width('100%')
      .height('100%')
    _  // 触底加载数据_
      .onReachEnd(() => {
        console.info('onReachEnd');
        if (this.dataSource.totalCount() > 200) {
          this.footerState = FooterState.End;
          return;
        }
        setTimeout(() => {
          for (let i = 0; i < 100; i++) {
            this.dataSource.addLastItem();
          }
        }, 1000);
      });
    };
  }
}

_// 实现IDataSource接口的对象，用于瀑布流组件加载数据_
export class WaterFlowDataSource implements IDataSource {
  private dataArray: number\[\] = \[\];
  private listeners: DataChangeListener\[\] = \[\];

  constructor() {
    for (let i = 0; i < 100; i++) {
      this.dataArray.push(i);
    }
  }

 _ // 获取索引对应的数据_
  public getData(index: number): number {
    return this.dataArray\[index\];
  }

  _// 通知控制器数据重新加载_
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    });
  }

 _ // 通知控制器数据增加_
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    });
  }

 _ // 通知控制器数据变化_
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    });
  }

  _// 通知控制器数据删除_
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    });
  }

 _ // 通知控制器数据位置变化_
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    });
  }

 _ //通知控制器数据批量修改_
  notifyDatasetChange(operations: DataOperation\[\]): void {
    this.listeners.forEach(listener => {
      listener.onDatasetChange(operations);
    });
  }

  _// 获取数据总数_
  public totalCount(): number {
    return this.dataArray.length;
  }

 _ // 注册改变数据的控制器_
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  _// 注销改变数据的控制器_
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

 _ // 增加数据_
  public add1stItem(): void {
    this.dataArray.splice(0, 0, this.dataArray.length);
    this.notifyDataAdd(0);
  }

 _ // 在数据尾部增加一个元素_
  public addLastItem(): void {
    this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  _// 在指定索引位置增加一个元素_
  public addItem(index: number): void {
    this.dataArray.splice(index, 0, this.dataArray.length);
    this.notifyDataAdd(index);
  }

 _ // 删除第一个元素_
  public delete1stItem(): void {
    this.dataArray.splice(0, 1);
    this.notifyDataDelete(0);
  }

  _// 删除第二个元素_
  public delete2ndItem(): void {
    this.dataArray.splice(1, 1);
    this.notifyDataDelete(1);
  }

  _// 删除最后一个元素_
  public deleteLastItem(): void {
    this.dataArray.splice(-1, 1);
    this.notifyDataDelete(this.dataArray.length);
  }

 _ // 在指定索引位置删除一个元素_
  public deleteItem(index: number): void {
    this.dataArray.splice(index, 1);
    this.notifyDataDelete(index);
  }

 _ // 重新加载数据_
  public reload(): void {
    this.dataArray.splice(1, 1);
    this.dataArray.splice(3, 2);
    this.notifyDataReload();
  }

 _ // 在数据尾部增加count个元素_
  public addNewItems(count: number): void {
    let len = this.dataArray.length;
    for (let i = 0; i < count; i++) {
      this.dataArray.push(this.dataArray\[len - 1\] + i + 1);
      this.notifyDataAdd(this.dataArray.length - 1);
    }
  }

  _// 刷新所有元素_
  public refreshItems(): void {
    let newDataArray: number\[\] = \[\];
    for (let i = 0; i < 100; i++) {
      newDataArray.push(this.dataArray\[0\] + i + 1000);
    }
    this.dataArray = newDataArray;
    this.notifyDataReload();
  }
}