如何自定义鸿蒙画中画窗口中的控制按钮？

Question

我的应用需要在画中画窗口中显示自定义的控制按钮，如快进、快退等。鸿蒙系统提供了相关API，但我不知道如何配置。能否提供一段代码，展示如何在画中画窗口中自定义控制按钮？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

我给您一个案例

import { PiPWindow } from '@kit.ArkUI';

// 假设你有一个自定义的组件或页面来处理画中画控制
@Component
struct PiPControlPanel {
    @State isPlaying: boolean = false;

    @Builder
    build() {
        Flex({ justifyContent: FlexAlign.Center, alignItems: FlexAlign.Center }) {
            Button('播放/暂停')
                .onClick(() => {
                    this.isPlaying = !this.isPlaying;
                    // 调用相应的API来控制视频播放状态
                })

            Button('快进')
                .onClick(() => {
                    // 调用相应的API来控制视频快进
                })

            Button('快退')
                .onClick(() => {
                    // 调用相应的API来控制视频快退
                })
        }
    }
}

// 假设你有一个页面来展示视频播放和画中画功能
@Component
struct VideoPlayerPage {
    private pipController: PiPWindow.PiPController | null = null;

    @Builder
    build() {
        Stack() {
            // 假设你有一个视频播放器组件
            VideoPlayer()

            // 画中画控制面板（仅在需要时显示）
            if (this.pipController) {
                PiPControlPanel()
            }
        }
    }

    @Lifecycle onAppear() {
        // 假设你在页面出现时创建并启动画中画
        this.createAndStartPiP();
    }

    @Lifecycle onDisappear() {
        // 假设你在页面消失时停止画中画
        this.stopPiP();
    }

    private async createAndStartPiP() {
        // 创建画中画控制器
        this.pipController = await PiPWindow.create({
            // 配置画中画窗口的参数，如大小、位置等
            width: 300,
            height: 200,
            // ...其他配置
        });

        // 假设你有一个自定义的PiP控制面板组件
        const pipControlPanel = new PiPControlPanel();
        // 将控制面板与画中画控制器关联起来（这里可能需要你根据具体API进行实现）

        // 启动画中画
        await this.pipController.startPiP();
    }

    private async stopPiP() {
        if (this.pipController) {
            await this.pipController.stopPiP();
            this.pipController = null;
        }
    }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。