HarmonyOS XComponent怎么采用组件安全区方案？

HarmonyOS

Heiang

2024-10-23 12:25:06

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

写demo模拟了一下，不是XC的问题，应该是safearea不支持挂载在自定义组件下面，可以将safesrea属性直接挂载下XComponent组件下面可以达到效果。

@Entry  
@Component  
struct XCAndSafeArea {  
  @State message: string = 'Hello World';  
  
  build() {  
    Row() {  
      Column() {  
        // Text(this.message)  
        // .fontSize(50)  
        // .fontWeight(FontWeight.Bold)  
        Stack() {  
          zhongJianShang()  
          // .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])  
  
          Row()  
            .width(50)  
            .height(50)  
            .backgroundColor(Color.Red)  
        }  
        // .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}  
  
@Component  
struct zhongJianShang {  
  build() {  
    Stack() {  
      xcDemo()  
    }  
    // .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])  
  }  
}  
  
@Component  
struct xcDemo {  
  private surfaceId: string = ''  
  private xComponentContext: Record<string, () => void> = {}  
  xComponentController: XComponentController = new XComponentController()  
  
  build() {  
    Row() {  
      XComponent({  
        id: 'xcomponent',  
        type: XComponentType.SURFACE,  
        controller: this.xComponentController  
      })  
        .onLoad(() => {  
          this.surfaceId = this.xComponentController.getXComponentSurfaceId()  
        })  
          // Row()  
        .backgroundColor(Color.Blue)  
        .width('100%')  
        .height('100%')  
        .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])  
    }  
  }  
}

请使用新增接口setXComponentSurfaceRect进行验证：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-xcomponent.md#setxcomponentsurfacerect12

代码改造示例：

.onLoad(async () => {  
  this.surfaceId = this.mXComponentController.getXComponentSurfaceId();  
  display.getAllDisplays((err, data) => {  
    let screenWidth : number = data[0].width  
    let screenHeight : number = data[0].height  
    let surfaceRect: SurfaceRect = { offsetX: 0, offsetY: 0, surfaceWidth: screenWidth, surfaceHeight: screenHeight }  
    this.mXComponentController.setXComponentSurfaceRect(surfaceRect)  
  })  
})