鸿蒙开发5.0【UI开发技巧】

鸿蒙系统小能手Mr.Li

于 2024-08-09 14:12:58 发布

阅读量724

点赞数 7

分类专栏：鸿蒙开发文章标签： harmonyos openharmony 鸿蒙系统鸿蒙 UI 程序员移动开发

本文链接：https://blog.csdn.net/2401_82772199/article/details/141060494

版权

鸿蒙开发专栏收录该内容

264 篇文章 1 订阅

订阅专栏

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为优先。

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。