前言
根据研究机构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。
注意
●父组件是滚动组件，则无效
●设置属性的组件不能使用固定宽高，可以写百分比
●expandSafeArea 不传参则为默认值，传 [][]则为设置无效
其他
设置导航条隐藏
windowClass.setSpecificSystemBarEnable('status', false)
设置全窗背景
windowClass.setWindowBackgroundColor('#FF0000') // 设置一致的颜色值
2、获取顶部及底部安全区大小
顶部安全高度
底部安全高度
获取安全区大小是通过AvoidAreaType来辨别的，用模拟器测试，其获取的结果如下：
window.AvoidAreaType.TYPE_SYSTEM
window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR
为保险起见，想要获取顶部安全高度可以这样写：
function getTopSafeArea(win: window.Window): number {
return Math.max(
win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect.height,
win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).topRect.height
)
}
获取底部安全高度：
function getBottomSafeArea(win: window.Window): number {
return Math.max(
win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).bottomRect.height,
win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect.height
)
}
3、输入框与安全区
如下图所示，在输入框上面有一个titlebar。在键盘弹起时，顶部的titlebar位置不变；弹出键盘不能遮挡输入框
键盘弹起前及弹起后
这里要用到设置安全区的知识，代码写法如下：
RelativeContainer() {
TitleBar()
// 省略样式代码
.expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM]) // 关键代码
RelativeContainer() {
PhoneInput()
// 省略样式代码
Button('下一步')
// 省略样式代码
}
.width('100%')
.height(300)
// 省略样式代码
}
.width('100%')
.height('100%')
.expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge. TOP]) // 关键代码
●在titlebar的位置增加 .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])
●在键盘输入区增加 .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge. TOP])
如果希望面板中的“下一步”按钮也要显示出来，就需要再额外多一些控制参数
4、@Prop 装饰符的使用
我们都知道@State表示组件内的状态变更，而@Prop表示父与子的状态同步，子变更不影响父，父变更影响子。如果子变更，父再变更，会覆盖掉子的变更，以父的数据为准。
应用场景
主要用于一些父与子的样式同步，比如父的当前是高亮版本，让子组件也是高亮版本。父切换成暗黑版本，让子也切换成暗黑版本。
再举例，比如当前父组件视图是一个可选态的组件，用户选中时，边框变高亮，同时，内部子组件也配合高亮显示。
具体代码就不写了
5、Flex 布局的性能优化处理
先说结论：
●尽量用Column或者Row来代替Flex布局
●大小不用变更的，子组件主动设置为flexShrink为0
●优先使用layoutWeight 代替 flexGrow 和 flexShrink 属性
●让子组件长度总和 等于 Flex容器长度，主轴方向上
原因：
●子组件如果不能占满Flex空间，为了让最后组件显示下，则会为倒数第二个和最后一个组件设置为flexShrink属性，导致第二个组件要再布局一次，导致布局效率下降
●如果没有设置layoutWeight属性，或者为0，则先按子组件布局一次。如果长度正好填充满Flex容器，则不需要二次布局。如果子组件没有填满Flex容器，但设置了flexGrow属性，则会触发二次布局拉伸填满容器。如果子组件超过了Flex容器，但设置了flexShrink熟悉，会触发二次布局填满容器。
●子组件设置了layoutWeight属性，且设置了displayPriority属性，会先按设置displayPriority相同值的子组件且没有layoutWeight属性的子组件进行布局，直到子组件总和不超过容器长度。如果超过了，就舍弃低优先级的displayPriority。如果还有剩余空间，就按layoutWeight让子组件按比例填充
6、alignSelf 子视图控制自己对齐方式
Column/Row/Flew/GridRow中，如果这个四个父布局设置了alignItem，则子视图可以通过调用alignSelf来控制自己的对齐方法，覆盖父布局的alignItem。注意，只能改变自己，不能改变其他子组件的对齐方式。
可选项包括：Auto，Start，End，Center，Baseline，Stretch
其中，Stretch：针对Flex容器且设置了wrap为FlexWrap.Wrap或者FlexWrap.WrapReverse时，元素拉伸到与当前行/列交叉轴长度最长的元素尺寸。其余情况下，无视子视图尺寸，都是拉伸到容器尺寸。
注意，这个属性与设置width(‘100%’)略有不同，如果是设置width为100%，再设置margin是不起效果的。但设置alignSelf为Stretch后，设置margin是起效果的。
7、Button 的状态效果（stateStyles）
如果想控制button的状态效果，比如点击态，不可点击态等，通过stateStyles来设置，支持包括：
●normal
●pressed
●disabled
●foused
●clicked
●selected
代码写法如下：
@Styles
disableStyles(): void {
.backgroundColor('#5b92E4')
.opacity(1)
}
Button('下一步')
.stateStyles({
disabled: this.disabledStyles
})
原始状态：
不可使用态：
stateEffect 快速实现点击效果
stateEffect(true) 支持点击效果，即在原来基础上增加了一个颜色加深的变化。算是一个简版的点击效果。但这个效果会与stateStyles的pressed冲突，以stateStyles设置的pressed为优先。
总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。随着鸿蒙的不断发展以及国家的大力支持,未来鸿蒙职位肯定会迎来一个大的爆发,只有积极应对变化，不断学习和提升自己，我们才能在这个变革的时代中立于不败之地。
