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

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

HarmonyOS
2024-10-23 12:25:06
浏览
收藏 0
回答 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)  
  })  
})
分享
微博
QQ
微信
回复
2024-10-23 15:59:10
相关问题
Flutter 项目在设备安全区如何适配?
119浏览 • 1回复 待解决
关于屏幕安全区域的问题咨询
274浏览 • 1回复 待解决
xComponent组件帧率怎么统计?
607浏览 • 1回复 待解决
XComponent 怎么设置为透明
2185浏览 • 1回复 待解决
设置XComponent组件为透明
460浏览 • 1回复 待解决