HarmonyOS鸿蒙Next中如何设计平板自由多窗三键样式

HarmonyOS鸿蒙Next中如何设计平板自由多窗三键样式 想要设计自由多窗模式下三键样式是如图的PC样式而不是默认的三键

图片


更多关于HarmonyOS鸿蒙Next中如何设计平板自由多窗三键样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

  1. 一般的窗口下面没有说可以替换原来的三键[窗口框架-电脑-针对多设备设计 - 华为HarmonyOS开发者]

  2. 可以尝试用异形窗口来实现，自己定义三键
    [PC/2in1异形窗口-窗口与屏幕管理-应用框架 - 华为HarmonyOS开发者]

cke_851.png

cke_3452.png

更多关于HarmonyOS鸿蒙Next中如何设计平板自由多窗三键样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


楼主要实现自由多窗模式下PC样式三键布局，试试这个Demo行不行

module.json5中配置声明

{
  "module": {
    "abilities": [{
      "name": "EntryAbility",
      "supportWindowMode": ["floating"],
      "windowOptions": {
        "titleBar": true,
        "preferMultiWindowOrientation": ["landscape", "portrait"]
      }
    }]
  }
}

主界面----//Index.ets

import { TitleBarControl, WindowSize } from '@kit.WindowKit'
import { getWindowStage } from '@kit.ArkUI'

@Component
struct Index {
  @State isMaximized: boolean = false

  build() {
    Column() {
      // 自定义标题栏
      Row() {
        Image($r('app.media.app_icon'))
          .width(24).height(24).margin(10)
        Blank()
        TitleBarButton({ icon: $r('app.media.minimize'), action: this.minimize })
        TitleBarButton({ icon: $r('app.media.maximize'), action: this.toggleMaximize })
        TitleBarButton({ icon: $r('app.media.close'), action: this.closeWindow })
      }
      .height(48)
      .backgroundColor('#F5F5F5')
      .borderRadius(12)
      .margin({ top: 8, right: 8, left: 8 })
      // 主内容区域
      Text('应用内容区域')
        .fontSize(20)
        .margin({ top: 20 })
    }
  }

  // 窗口控制方法
  minimize = () => {
    getWindowStage().resize(WindowSize.MINI)
  }

  toggleMaximize = () => {
    this.isMaximized = !this.isMaximized
    getWindowStage().resize(
      this.isMaximized ? WindowSize.FULL_SCREEN : WindowSize.DEFAULT
    )
  }

  closeWindow = () => {
    getWindowStage().destroyWindow()
  }
}

@Component
struct TitleBarButton {
  private icon: Resource
  private action: () => void

  build() {
    Button() {
      Image(this.icon)
        .width(24).height(24)
    }
    .borderRadius(20)
    .width(40).height(40)
    .backgroundColor(Color.Transparent)
    .hoverEffect(HoverEffect.HIGHLIGHT)
    .onClick(() => this.action())
    .margin({ left: 10 })
  }
}

在HarmonyOS Next中设计平板自由多窗三键样式，需使用ArkUI的WindowStage能力。通过onWindowStageCreate生命周期设置窗口模式为WindowMode.FLOATING，并配置SupportWindowMode.FULL_SCREEN | SupportWindowMode.SPLIT | SupportWindowMode.FLOATING支持多窗。使用WindowManager的createWindow方法创建悬浮窗，通过WindowButton组件自定义三键样式（如关闭/最小化/全屏）。在abilityInfo中声明supportMultiWindow:true启用多窗口特性。布局采用Stack容器管理主窗口与悬浮窗层级关系。

在HarmonyOS Next中实现PC风格的三键样式，可以通过自定义窗口控制组件来实现。以下是关键实现步骤：

  1. 在布局文件中定义自定义导航栏：
<DirectionalLayout
    ohos:width="match_parent"
    ohos:height="48vp"
    ohos:background_element="#F2F2F2">

    <Button
        ohos:id="$+id:btn_minimize"
        ohos:width="48vp"
        ohos:height="48vp"
        ohos:text="—"/>

    <Button
        ohos:id="$+id:btn_maximize"
        ohos:width="48vp"
        ohos:height="48vp"
        ohos:text="□"/>

    <Button
        ohos:id="$+id:btn_close"
        ohos:width="48vp"
        ohos:height="48vp"
        ohos:text="×"/>
</DirectionalLayout>
  1. 在Ability中处理窗口控制逻辑：
// 最小化
findComponentById(ResourceTable.Id_btn_minimize).setClickedListener(component -> {
    getWindow().minimize();
});

// 最大化/还原
findComponentById(ResourceTable.Id_btn_maximize).setClickedListener(component -> {
    if (getWindow().isWindowMaximized()) {
        getWindow().restore();
    } else {
        getWindow().maximize();
    }
});

// 关闭
findComponentById(ResourceTable.Id_btn_close).setClickedListener(component -> {
    terminateAbility();
});
  1. 通过WindowManager设置窗口属性：
Window window = getWindow();
WindowManager.LayoutConfig layoutConfig = window.getLayoutConfig();
layoutConfig.type = WindowManager.LayoutConfig.TYPE_FLOATING;
window.setLayoutConfig(layoutConfig);

注意：需要确保应用已申请悬浮窗权限，并在config.json中声明相关能力：

"abilities": [
    {
        "name": "MainAbility",
        "type": "page",
        "window": {
            "isFloating": true
        }
    }
]

这种实现方式可以让自由多窗模式下的窗口拥有类似PC的三键控制样式。

回到顶部