鸿蒙5.0开发【手机上下分屏开发实践】业务场景与解决方案

概述

手机上下分屏用途广泛，主要应用于办公应用中工作学习和邮件的多任务处理、购物应用中浏览不同商品比较价格或查看评论、在浏览视频的同时通过社交媒体与朋友聊天等，在智能手机中日益成为提升多任务处理效率的重要工具。因此应用需要针对手机上下分屏等小窗口场景进行适配，提升用户体验。

分屏功能允许用户将手机屏幕分为上下两个独立的操作区域，从而允许同时运行和操作两个应用程序的功能。同时，用户可以根据需求调整屏幕的分割比例，拖动中间的分割线来灵活更改每个应用所占的屏幕空间，可调节上下分屏比例为1:1、1:2、2:1。效果图如下：

在手机上下分屏时，应用窗口的高度默认减小至约全屏高度的一半。下文将从布局设计的维度，针对手机上下分屏常见的四种开发场景，给出推荐的设计方案与开发指导。

小窗口下的典型布局：

• 实现手机上下分屏场景下独特的页面布局。
• 页面支持滑动、完整显示。
• 短视频播放页面完整显示，侧边控件支持滑动。
• 自定义弹窗适配小窗口。

增值体验：

• 滑动沉浸式浏览。

布局设计

本章节将介绍手机上下分屏中推荐的设计方案，保证页面布局能够完整显示，避免出现截断、挤压、堆叠等现象，并充分利用屏幕空间，提供最佳的用户体验。

独特的小窗口布局

应用通常针对类方屏的小窗口页面会设计不同的布局，因此需要在代码中实现响应式布局。一多场景中所有的响应式布局都基于断点来开发，手机上下分屏场景的区分需要在项目中添加横纵断点。

实现原理

1. 在手机上下分屏1:1时，横向断点为sm，纵向断点为md，推荐使用独特的小窗口布局。在手机上下分屏1:2时，比例为1对应窗口的横向断点为sm，纵向断点为sm，推荐使用独特的小窗口布局；比例为2对应窗口的横向断点为sm，纵向断点为lg，推荐使用与手机全屏相同的布局。

   以设置图片的高度为例，在小窗口布局中高度为24vp，手机全屏时高度为48vp。使用横纵向断点判断，设置具体的属性值。

Image($r('app.media.arrow_right'))
  .height(this.currentWidthBreakpoint === 'sm' && (this.currentHeightBreakpoint === 'sm' ||
    this.currentHeightBreakpoint === 'md') ? 24 : 48)
  .aspectRatio(1)

1. 应用中有小窗口布局中显示，手机全屏时隐藏的内容，使用visibility或if…else…结合横纵断点判断是否显示。

// 方案一
Column() {
  // 小窗口布局显示的内容
}
.visibility(this.currentWidthBreakpoint === 'sm' && (this.currentHeightBreakpoint === 'sm' ||
  this.currentHeightBreakpoint === 'md') ? Visibility.Visible : Visibility.None)

// 方案二
if (this.currentWidthBreakpoint === 'sm' && (this.currentHeightBreakpoint === 'sm' ||
  this.currentHeightBreakpoint === 'md')) {
  Column() {
    // 小窗口布局显示的内容
  }
}

页面支持滑动

手机上下分屏时，窗口高度会减小至约手机的1/2，可能导致全屏完整显示的内容在上下分屏时显示不全。推荐使用[Scroll组件]实现页面支持滑动。

实现原理

设置Scroll组件的scrollBar属性为BarState.Off，控制滚动条不显示。当窗口高度足够显示页面全部内容时，Scroll组件自动失效，页面不可滑动；当窗口高度不足以显示页面全部内容时，Scroll组件自动生效，页面可以滑动。

Scroll() {
  Column() {
    // ...
  }
  .width('100%')
}
.scrollBar(BarState.Off)
.height('100%')
.width('100%')

短视频播放页面

短视频播放页面进入手机上下分屏时，要求背景图片（视频）进行等比例缩放，并进行上下沉浸，上方沉浸至顶部标题栏，下方沉浸至底部页签栏。侧边控件可滑动，完整显示页面内容。