多窗口支持

HarmonyOS 支持多窗口、分屏、悬浮窗，是鸿蒙多设备能力的重要体现。

---

1. 多窗口模式

1.1 多窗口模式类型

模式	说明
单窗口	标准应用窗口
分屏	两个应用同时显示
悬浮窗	浮动窗口
折叠屏	展开/折叠状态切换

---

2. 分屏布局

2.1 应用内分屏

@Entry
@Component
struct Index {
    private navPathStack: NavPathStack = new NavPathStack()

    build() {
        SplitPane({ mode: SplitPaneMode.Horizontal }) {
            // 左侧：导航列表
            Navigation(this.navPathStack, SplitPaneSide.Left) {
                NavDestination() {
                    List() {
                        ForEach(this.items, (item: string) => {
                            ListItem() {
                                Text(item)
                            }
                        })
                    }
                }
                .title('列表')
            }

            // 右侧：详情内容
            Navigation(this.navPathStack, SplitPaneSide.Right) {
                NavDestination({ type: 'detail' }) {
                    Text('详情内容')
                }
                .title('详情')
            }
        }
        .gap(1)
        .width('100%')
        .height('100%')
    }
}

2.2 分屏面板控制

// 设置分屏面板大小
SplitPane() {
    Navigation(navStack, SplitPaneSide.Left) { ... }
        .paneSize(200)  // 左侧 200vp

    Content()
        .paneSize(-1)   // 自适应剩余空间
}

// 垂直分屏
SplitPane({ mode: SplitPaneMode.Vertical }) {
    Header()
        .paneSize(100)
    Body()
        .paneSize(-1)
}

---

3. 悬浮窗

3.1 创建悬浮窗

import { window } from '@kit.ArkUI'

// 创建浮动窗口
let floatingWindow = new window.FloatingWindow(this.context)

await floatingWindow.create({
    windowType: window.WindowType.FLOATING,
    width: 300,
    height: 200
})

// 加载内容
floatingWindow.setUIContent('pages/FloatingPage')

// 设置位置
floatingWindow.setWindowPosition({ x: 100, y: 100 })

// 设置属性
floatingWindow.setWindowAttributes({
    systemBarEnabled: false,  // 隐藏系统栏
    immersive: true          // 沉浸式
})

3.2 销毁悬浮窗

floatingWindow.destroy().then(() => {
    console.log('悬浮窗已销毁')
})

---

4. 折叠屏适配

4.1 折叠状态检测

import { window, display } from '@kit.ArkUI'

@Entry
@Component
struct FoldablePage {
    @State isFolded: boolean = false
    @State screenCount: number = 1
    @State foldAngle: number = 0

    aboutToAppear() {
        // 检测设备数量
        this.screenCount = display.getScreenCountSync()

        // 检测折叠角度
        let windowState = window.getWindowState()
        if (windowState.foldingFeature !== undefined) {
            this.foldAngle = windowState.foldingFeature.angle ?? 0
            this.isFolded = this.foldAngle < 170
        }
    }

    build() {
        if (this.isFolded) {
            // 折叠状态：窄屏布局
            Column() {
                Text('折叠状态')
                    .fontSize(24fp)
                Content()
            }
        } else if (this.screenCount > 1) {
            // 展开状态：分屏布局
            SplitPane({ mode: SplitPaneMode.Horizontal }) {
                List()
                Content()
            }
        } else {
            // 展开状态：单页宽布局
            Column() {
                Text('展开状态')
                    .fontSize(24fp)
                FullContent()
            }
        }
    }
}

---

5. 窗口管理

5.1 窗口事件监听

window.getWindowState().on('windowSizeChange', (size: window.WindowSize) => {
    console.log('窗口大小变化:', size.width, size.height)
})

window.getWindowState().on('windowOrientationChange', (orientation: window.WindowOrientation) => {
    console.log('方向变化:', orientation)
})

5.2 窗口属性设置

let windowState = window.getWindowState()

// 设置窗口方向
windowState.setOrientation(window.WindowOrientation.PORTRAIT)

// 设置全屏
windowState.setWindowLayoutFullScreen(true)

// 设置状态栏
windowState.setStatusBarColor(Color.FromRGB(0x1A, 0x1A, 0x2E))

---

6. 面试高频考点

Q1: 多窗口支持的主要模式？

回答：分屏（SplitPane）、悬浮窗（FloatingWindow）、折叠屏适配。

Q2: 折叠屏适配的关键？

回答：检测折叠角度、分屏布局、断点切换。折叠时窄屏、展开时分屏/宽屏。

---

🐱 小猫提示：多窗口记住 "SplitPane 分屏、FloatingWindow 悬浮、折叠角度检测"。