【鸿蒙开发教程】详解HarmonyOS Next UI开发技巧

前言

根据研究机构Counterpoint Research发布的最新数据，2024年第一季度，鸿蒙OS份额由去年一季度的8%上涨至17%，iOS份额则从20%下降至16%。

这意味着，华为鸿蒙OS在中国市场的份额超越苹果iOS，已成中国第二大操作系统

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

今天来跟大家聊聊HarmonyOS开发中的UI开发技巧

1、沉浸式屏幕适配

这里只讲上下导航条颜色不一样的情况，这种场景比较多见。就是让头部视图延伸到导航条或者尾部视图延伸到底部导航条。

示例：如图所示

写法

要开发沉浸式布局，就需要在头部UI，或者尾部UI，或者两者都设置expandSafeArea
头部。可以这样理解，要将哪个视图延伸到顶部或者底部。

Column()
  .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD],[SafeAreaEdge.Top])

Column()
   .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD],[SafeAreaEdge.Bottom])
   
// 如果像是List布局这样需要占满全屏的，可以直接设置TOP和Bottom，然后再设置padding，不让内部视图改住导航条
List()
   .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD],[SafeAreaEdge.Top, SafeAreaEdge.Bottom]).padding({top:15})

那么，在视图创建的时候，为了避免视图顶到顶部，可以设置margin或者创建一个空白视图占据这块，设置一个安全区高度，比如Divider或者Column。

注意

●父组件是滚动组件，则无效
●设置属性的组件不能使用固定宽高，可以写百分比