# HarmonySmartMutilWindow

**Repository Path**: flyxianable/harmony-smart-mutil-window

## Basic Information

- **Project Name**: HarmonySmartMutilWindow
- **Description**: 鸿蒙智慧多窗示例工程
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-15
- **Last Updated**: 2024-10-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HarmonySmartMutilWindow

#### 介绍
鸿蒙智慧多窗示例工程

# 智慧多窗

参考文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/multi-window-intro-V5

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/multi-window-support-V5

##  一、悬浮窗

### 1、触发方式

#### （1）手势触发

应用全屏时从屏幕底部向上滑至右上方热区，松手后可开启悬浮窗模式

![img.png](img.png)

#### （2）通知消息下拉触发

在系统接收到通知消息未收起时，可直接下拉此通知消息开启悬浮窗模式。

![img_1.png](img_1.png)

### 2、恢复方式

#### （1）多任务中心中恢复

对于已开启悬浮窗模式的应用，在进入多任务中心时，悬浮窗应用同全屏应用一起显示在多任务中心，
用户选择点击悬浮窗应用卡片时可恢复悬浮窗模式。

#### （2）侧边条恢复

对于已开启悬浮窗模式的应用，其最小化后会暂存在屏幕上的侧边条中，点击或者长按侧边条可展开任务选择界面，
选择点击侧边条中悬浮窗应用卡片时可恢复悬浮窗模式。

![img_2.png](img_2.png)

### 3、开发设置方式

[module.json5](entry / module.json5)

#### （1）"supportWindowMode": ["floating"],

#### （2）preferMultiWindowOrientation

 "preferMultiWindowOrientation": "portrait",  竖向悬浮窗

 ![img_5.png](img_5.png)

 "preferMultiWindowOrientation": "landscape", 横向悬浮窗

 ![img_6.png](img_6.png)

##### 【演示】

模拟器


## 二、分屏

### 1、触发方式

#### （1）手势触发

应用全屏时，从屏幕底部向上滑至左上方热区，进入待分屏状态; 点击桌面另一个支持分屏的应用图标或卡片，可形成分屏。

### 2、开发设置方式

entry / module.json5

##### （1）属性1： "supportWindowMode": ["split"],

##### （2）属性2： preferMultiWindowOrientation

直板机：不支持

折叠屏手机展开态：

"preferMultiWindowOrientation": "portrait"   形成左右分屏

![img_7.png](img_7.png)

"preferMultiWindowOrientation": "landscape", 形成上下分屏

![img_8.png](img_8.png)

#### [演示]

模拟器 ： 直板机和折叠屏手机

## 三、preferMultiWindowOrientation的配置建议

### 1、portrait
   多窗布局方向为竖向。建议竖向游戏类应用配置。

### 2、landscape
多窗布局方向为横向，配置后支持横向悬浮窗和上下分屏。建议横向游戏类应用配置。

### 2、landscape
多窗布局方向为横向，配置后支持横向悬浮窗和上下分屏。建议横向游戏类应用配置。  

## 四、应用布局适配
### 1、宽高比
#### （1）悬浮窗

|设备   |竖向悬浮窗宽高比   |横向悬浮窗宽高比   |
|---|---|---|
|手机   |3:4.575   | 16:9  |
|手机折叠屏展开态   |9:16   |  16:9 |

#### （2）分屏

|设备   |默认分屏比例   | 分屏可调节档位                          |
|---|---|----------------------------------|
|手机   |3:4.575   | “上下分屏”: 1:1, 1:2, 2:1<br/>“左右分屏”: 1:1 |
|手机折叠屏展开态   |1:1   | “上下分屏”和 “左右分屏”: 1:1                           |

### 2、监听窗口尺寸变化

  windowClass.on('windowSizeChange', (windowSize) => {
  AppStorage.setOrCreate('winWidth', windowSize.width);
  AppStorage.setOrCreate('winHeight', windowSize.height);
  });

####（1）悬浮窗示例

##### 【未监听】
(a) 正常状态

![img_9.png](img_9.png)

(b) 悬浮态

![img_10.png](img_10.png)

##### 【增加监听后】
![img_11.png](img_11.png)

####（2）分屏示例
【折叠屏】
##### 【未监听】
![img_12.png](img_12.png)
##### 【增加监听后】
![img_13.png](img_13.png)

【平板】
(a) 正常状态
![img_14.png](img_14.png)

##### 【未监听】

![img_15.png](img_15.png)

##### 【增加监听后】

![img_16.png](img_16.png)

## 五、避让顶部操作横条

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/multi-window-controlbar-adapt-V5