对鸿蒙应用开发初学者非常有帮助的布局小技巧

在用DevEco Studio开发鸿蒙应用的时候，初学者在编写UI布局的时候，经常会发生布局结果不符合预期的情况，这个时候有两个技巧可以检查UI布局哪个细节出了问题，第一个技巧就是点击Inspector按钮，可以像检查层叠样式表那样查看每个UI组件的边界；第二个技巧就是通过@Styles修饰符先定义一个可复用的边框样式，然后在有需要的地方调用这个样式函数。可复用样式函数如下：

@Styles
function showBorderEdge(){
  .borderWidth(isShowBorder? 1: 0)
  .borderColor(isShowBorder? Color.Red : Color.White)
}

比如要检查Row组件的边界，可以在Row组件后面调用这个可复用样式函数，示例如下：

Row(){
   //something
}.showBorderEdge()

第二种方式存在一个缺点就是只能在当前Page内使用，无法通过export导出给外部其它页面使用，如果能导出复用就能大大减少很多页面重复写同样的样式。当前使用鸿蒙SDK版本是HarmonyOS 5.0.4 Release SDK, inclusion of OpenHarmony SDK Ohos_sdk_public 5.0.4.150 (API Version 16 Release) as is，不知道以后会不会支持导出复用。