跳到主要内容

09窗口管理

小窗（悬浮窗）

窗口管理

设计小窗参数接口

呈现小窗口时需要指定小窗口的位置、尺寸、内容。

src/main/ets/model/SubWindowOption.ets

export default interface SubWindowOption {
  // 小窗名称
  subWindowName:string
  // 小窗位置
  x: number
  y: number
  // 小窗尺寸
  width: number
  height: number
  //  小窗页面路由地址
  subWindowPageUrl: string
}

设计工具类

src/main/ets/common/MySubWindow.ets

import { window } from '@kit.ArkUI';
import SubWindowOption from '../model/SubWindowOption';

class MySubWindow{
  windowStage_: window.WindowStage | null = null;
  // 小窗口对象
  sub_windowClass: window.Window | null = null;

  // 创建小窗的方法
  async showSubWindow(subWindowOption:SubWindowOption) {
    // 1.创建应用子窗口
    if (this.windowStage_ == null) {
      console.error('dxin => 小窗无法创建，因为 windowStage_ is null');
    } else {
      this.sub_windowClass = await this.windowStage_.createSubWindow(subWindowOption.subWindowName)
      // 2 同步代码 设置小窗 位置
      this.sub_windowClass.moveWindowToAsync(subWindowOption.x, subWindowOption.y)
      this.sub_windowClass.resizeAsync(subWindowOption.width, subWindowOption.height)
      // 窗口里面得有内容
      this.sub_windowClass.setUIContent(subWindowOption.subWindowPageUrl, () => {
        // 让自己显示出来
        this.sub_windowClass!.showWindow()
      })
    }
  }

  destroySubWindow() {
    // 4.销毁子窗口。当不再需要子窗口时，可根据具体实现逻辑，使用destroy对其进行销毁。
    this.sub_windowClass!.destroyWindow();
  }
}
let mySubWindow = new MySubWindow()
export default mySubWindow

在入口类中初始化工具类的`windowStage_`

src/main/ets/entryability/EntryAbility.ets

  onWindowStageCreate(windowStage: window.WindowStage): void {

    windowStage.loadContent('pages/Guide', (err) => {
      if (err.code) {
        return;
      }
      // 工具类中的那个主舞台对象 要被真正的主舞台（入口类的）对象赋值
      mySubWindow.windowStage_  = windowStage
    });
  }

设计小窗页面

src/main/ets/pages/SubWindowContent.ets

import mySubWindow from '../common/MySubWindow'

@Entry
@Component
struct SubWindowContent {
  build() {
    Column({ space: 30 }) {
      Text('帝心小窗口').fontSize(22).fontColor('red')
      Button('关闭当前小窗口')
        .onClick(() => {
          mySubWindow.destroySubWindow()
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在页面中调用工具类开启小窗

src/main/ets/pages/Index.ets

 Button('点击显示小窗')
  .onClick(() => {
    mySubWindow.showSubWindow({
      subWindowName:"帝心",
      x:300,
      y:300,
      width:500,
      height:500,
      subWindowPageUrl:"pages/SubWindowContent"
    })
  })

窗口管理