onSizeChange计算有偏差，如何保持和onAreaChange计算一致
=======================================

#### 问题现象

onSizeChange测量值不准，onSizeChange和onAreaChange计算结果不一致。

#### 背景知识

*   [onSizeChange](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-component-size-change-event#onsizechange)：组件区域变化时触发该回调。仅会响应由布局变化所导致的组件尺寸发生变化时的回调。该接口在布局发生变化时触发，由于计算精度的关系，其返回值可能与真实物理尺寸存在细微的差异。
*   [onAreaChange](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-component-area-change-event#onareachange)：组件区域变化时触发该回调。仅会响应由布局变化所导致的组件大小、位置发生变化时的回调。
*   [pixelRound](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-pixelroundforcomponent#pixelround)：指定当前组件在指定方向上的像素取整对齐方式，某方向不设置时默认在该方向进行四舍五入取整。

#### 解决方案

onSizeChange是实际绘制的值，可以使用组件级像素取整pixelRound把组件的对齐方式设置为不取整计算。

@Component
struct onAreaChangeSolution1 {
  aboutToAppear() {
  }

  build() {
    Column() {
      Column() {
      }
      .pixelRound({
        start: PixelRoundCalcPolicy.NO\_FORCE\_ROUND,
        end: PixelRoundCalcPolicy.NO\_FORCE\_ROUND,
        top: PixelRoundCalcPolicy.NO\_FORCE\_ROUND,
        bottom: PixelRoundCalcPolicy.NO\_FORCE\_ROUND
      })
      .height('2')
      .onSizeChange((\_, area: SizeOptions) \=\> {
        console.info('=====onSizeChange: ' \+ this.getUIContext().vp2px(area.height as number));
      })
      .onAreaChange((\_, area: Area) \=\> {
        console.info('=====onAreaChange: ' \+ this.getUIContext().vp2px(area.height as number));
      });

      Column() {
      }
      .pixelRound({
        start: PixelRoundCalcPolicy.NO\_FORCE\_ROUND,
        end: PixelRoundCalcPolicy.NO\_FORCE\_ROUND,
        top: PixelRoundCalcPolicy.NO\_FORCE\_ROUND,
        bottom: PixelRoundCalcPolicy.NO\_FORCE\_ROUND
      })

      .height('2')
      .onSizeChange((\_, area: SizeOptions) \=\> {
        console.info('=====onSizeChange2: ' \+ this.getUIContext().vp2px(area.height as number));
      })
      .onAreaChange((\_, area: Area) \=\> {
        console.info('=====onAreaChange2: ' \+ this.getUIContext().vp2px(area.height as number));
      });
    }
    .pixelRound({
      start: PixelRoundCalcPolicy.NO\_FORCE\_ROUND,
      end: PixelRoundCalcPolicy.NO\_FORCE\_ROUND,
      top: PixelRoundCalcPolicy.NO\_FORCE\_ROUND,
      bottom: PixelRoundCalcPolicy.NO\_FORCE\_ROUND
    })
    .backgroundColor(Color.Pink)
    .width('100%')
    .onSizeChange((\_, area: SizeOptions) \=\> {
      console.info('=====onSizeChange\_out: ' \+ this.getUIContext().vp2px(area.height as number));
    })
    .onAreaChange((\_, area: Area) \=\> {
      console.info('=====onAreaChange\_out: ' \+ this.getUIContext().vp2px(area.height as number));
    });
  }
}

#### 常见FAQ

Q：如何使用[onAreaChange](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-component-area-change-event#onareachange)对[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)组件进行布局？

A：可以使用[onAreaChange](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-component-area-change-event#onareachange)获取[Row](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row)组件的宽度，进行布局。

@Component
struct onAreaChangeSolution2 {
  @State widthAll: number \= 0;
  @State widthA: number \= 0;

  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
      Stack() {
        Row() {
          Text('标题');
          Text('字符串字符串字符串字符串字符串字符串');
        }
        .height(50)
        .backgroundColor('red')
        .id('A')
        .onAreaChange((oldValue: Area, newValue: Area) \=\> {
          let info \= JSON.stringify(newValue.width);
          this.widthA \= parseFloat(info);
        })
        .margin({ left: -1 });

        Row() {
          Text('增长率70.5%');
        }
        .height(50)
        .backgroundColor('blue')
        .width(this.widthAll \- this.widthA)
        .id('B')
        .margin({ left: 281 });
      };
    }
    .width('100%')
    .onAreaChange((oldValue: Area, newValue: Area) \=\> {
      let info \= JSON.stringify(newValue.width);
      this.widthAll \= parseFloat(info);
      console.log('=================\>all:' \+ this.widthAll);
    })
    .backgroundColor(Color.Green);
  }
}