cocos creator获取Widget组件节点并动态更新widget

NO.1
作用场景

因为手机屏幕摄像头或者其他等造成的刘海和异形孔,导致UI被遮盖

原布局为Widget自适应布局,顶部22px,没有兼容全面屏或者异形孔

如本文中的返回按钮,被摄像头给挡住了,需要根据状态栏适当下移

 

NO.2
解决方案

获取当前节点的Widget组件

代码

 

let widgetNode=this.node.getComponent(cc.Widget)

 

获取当前状态栏的高度,使用平台提供的系统信息API等

设置Widget组件同时更新Widget组件

// 状态栏高度
let statusBarHeight=xxx
// 设置widget 顶部距离
widgetNode.top=widgetNode.top+statusBarHeight
// 更新Widget组件
widgetNode.updateAlignment()
NO.3
tips

widget参考文档

https://docs.cocos.com/creator/2.1/manual/zh/components/widget.html?h=widget 

手动调整widget API文档

https://docs.cocos.com/creator/2.1/api/zh/classes/Widget.html#updatealignment 

END