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

作者：auhgnixgnahz

2025-06-23
北京
本文字数：1657 字
阅读完需：约 5 分钟

当 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@ComponentV2struct 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'    })  }}</window.avoidarea | null>