如何实现一个页面显示子窗口

如何实现一个页面显示子窗口


HarmonyOS
2024-07-31 10:27:37
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
智体美劳全发展

在调用`windowStage`对象的`createSubWindow`接口时,将执行子窗口的创建操作。

一旦子窗口成功创建,我们将利用`moveWindowTo`和`resize`接口,精确地设置子窗口的位置、尺寸,并配置其相关属性。

接下来,通过调用`setUIContent`接口,我们将为子窗口加载相应的验证码校验页面,以确保用户界面的完整性和功能性。

最后,通过执行`showWindow`接口,我们将使子窗口在用户界面上可见,从而完成整个创建和展示流程。

// WindowModel.ets
createSubWindow() {
  if (this.windowStage === undefined) {
    Logger.error('Failed to create the subWindow.');
    return;
  }
创建子窗口
  this.windowStage.createSubWindow(CommonConstants.SUB_WINDOW_NAME, (err, data: window.Window) => {
    if (err.code) {
      Logger.error(`Failed to create the window. Code:${err.code}, message:${err.message}`);
      return;
    }
获取子窗口实例
    this.subWindowClass = data;
获取屏幕宽高
    let screenWidth = display.getDefaultDisplaySync().width;
    let screenHeight = display.getDefaultDisplaySync().height;
根据子窗口宽高比计算子窗口宽高
    let windowWidth = screenWidth * CommonConstants.SUB_WINDOW_WIDTH_RATIO;
    let windowHeight = windowWidth / CommonConstants.SUB_WINDOW_ASPECT_RATIO;
计算子窗口起始坐标
    let moveX = (screenWidth - windowWidth) / 2;
    let moveY = screenHeight - windowHeight;
将子窗口移动到起始坐标处
    this.subWindowClass.moveWindowTo(moveX, moveY, (err) => {
      if (err.code) {
        Logger.error(`Failed to move the window. Code:${err.code}, message:${err.message}`);
        return;
      }
    });
设置子窗口的宽高
    this.subWindowClass.resize(windowWidth, windowHeight, (err) => {
      if (err.code) {
        Logger.error(`Failed to change the window size. Code:${err.code}, message:${err.message}`);
        return;
      }
    });
设置子窗口展示的页面内容
    this.subWindowClass.setUIContent(CommonConstants.VERIFY_PAGE_URL, (err) => {
      if (err.code) {
        Logger.error(`Failed to load the content. Code:${err.code}, message:${err.message}`);
        return;
      }
      if (this.subWindowClass === undefined) {
        Logger.error('subWindowClass is undefined.');
        return;
      }
设置子窗口背景颜色
      this.subWindowClass.setWindowBackgroundColor('#00000000');
显示子窗口
      this.subWindowClass.showWindow((err) => {
        if (err.code) {
          Logger.error(`Failed to show the window. Code:${err.code}, essage:${err.message}`);
          return;
        }
      });
    });
   });
}
分享
微博
QQ
微信
回复
2024-07-31 18:46:37
相关问题
如何生成一个可以交互的移动窗口
944浏览 • 1回复 待解决
销毁一个窗口的方法
410浏览 • 1回复 待解决
如何实现一个验证码弹窗子窗口
421浏览 • 1回复 待解决
如何实现一个GIF图显示指定次数
2127浏览 • 1回复 待解决
编写一个页面实现不规则列表
817浏览 • 1回复 待解决
编写一个页面,实现吸顶效果
1165浏览 • 1回复 待解决
编译一个页面,实现选座场景
766浏览 • 1回复 待解决
一个页面怎么实现多个AbilitySlice?
14396浏览 • 5回复 待解决
如何实现一个折叠组件
1020浏览 • 1回复 待解决