鸿蒙Next解决子组件全屏后margin不生效

当Column/Row是全屏时，子组件如果想通过设置宽度为全屏，然后通过margin设置左右边距限制子组件的大小，这时会发现，子组件的margin并没有生效，宽度依然是全屏的，例如： 由上发现： 1.margin并没有限制了子组件的宽小于父组件 2.Column的左margin生效了，但是Column的宽和父组件的Row的宽是一样的 解决方案： 使用constraintSize这个方法限制组件的最大最小宽高 实现代码：

/**
 * 获取系统状态栏，导航栏高度
 * @param context AvoidAreaType
 *
 * TYPE_SYSTEM	0	表示系统默认区域。通常表示状态栏区域，悬浮窗状态下的应用主窗中表示三点控制栏区域。
 * TYPE_CUTOUT	1	表示刘海屏区域。
 * TYPE_SYSTEM_GESTURE	2	表示手势区域。当前，各设备均无此类型避让区域。
 * TYPE_KEYBOARD	3	表示软键盘区域。
 * TYPE_NAVIGATION_INDICATOR	4	表示底部导航条区域。
 *
 */
async function getWindowAvoidArea(context: common.UIAbilityContext,type: number): Promise<window.AvoidArea | null> {
  try {
    const mainWindow = await window.getLastWindow(context);
    const avoidArea = mainWindow.getWindowAvoidArea(type);
    return avoidArea
  } catch (e) {
    console.log('getWindowAvoidArea fail');
    return null
  }
}
@Entry
@ComponentV2
struct SizeChange{
  @Local textSize:string = ''
  @Local maxWidth:number = 0;
   aboutToAppear() {
    let displayClass: display.Display = display.getDefaultDisplaySync();
    this.textSize +='屏幕 宽:'+util.format('%i', px2vp(displayClass.width))+'高:'+util.format('%i', px2vp(displayClass.height))+'\n'
    this.maxWidth = px2vp(displayClass.width)
    getWindowAvoidArea(this.getUIContext().getHostContext() as common.UIAbilityContext,window.AvoidAreaType.TYPE_SYSTEM).then((avoidArea)=>{
      this.textSize += '状态栏 高:'+util.format('%i',px2vp(avoidArea?.topRect.height))+'\n'

    })
    getWindowAvoidArea(this.getUIContext().getHostContext() as common.UIAbilityContext,window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).then((avoidArea)=>{
      this.textSize += '导航栏 高:'+util.format('%i',px2vp(avoidArea?.bottomRect.height))+'\n'

    })
  }
  build() {
    Row() {
      Column() {
        Text(this.textSize)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Blue)
          .margin({ left: 50, right: 50 })
          //使用constraintSize属性来限制最大宽高
          .constraintSize({ maxWidth: '100%' })
          .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) =>{
            this.textSize += 'Text width:'+util.format('%i', newValue.width)+' height:'+util.format('%i', newValue.height)+'\n'
          })
      }
      .width('100%')
      .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) =>{
        this.textSize += 'Column width:'+util.format('%i', newValue.width)+' height:'+util.format('%i', newValue.height)+'\n'
      })
      .constraintSize({ maxWidth: '100%' })
      .margin({ left: 10, right: 10 })
      .backgroundColor(Color.Yellow)
    }
    .height('100%')
    .width('100%')
    .onSizeChange((oldValue: SizeOptions, newValue: SizeOptions) =>{
      this.textSize += 'Row width:'+util.format('%i', newValue.width)+' height:'+util.format('%i', newValue.height)+'\n'
    })
  }
}

屏幕宽387-Column左右margin20-Text左右margin100 = 267 而Text宽268 相差的1vp是因为屏幕像素px2vp时进行了十进制取整，所以有误差