HarmonyOS Window可以根据自己内部Component的尺寸自适应高宽吗？

Question

HarmonyOS Window可以根据自己内部Component的尺寸自适应高宽吗？

Answer 1

核心思路如下：

1、在EntryAbility中，通过AppStorage保存WindowStage实例。

2、在子窗口根布局下，通过inspector.ComponentObserver监听待更换组件宽高，同时更新窗口大小。

样例代码如下：

// EntryAbility内：
onWindowStageCreate(windowStage: window.WindowStage): void {
  // ...
  windowStage.loadContent('pages/ImageScaleTest', (err) => {
  if (err.code) {
  hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
  return;
}
// 保存windowStage
AppStorage.setOrCreate("windowStage", windowStage);
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});
}
// 在开启子窗口调用处：
this.windowStage.createSubWindow(SUB_WINDOW_NAME, (err, windowClass) => {
  if (err.code > 0) {
    console.error(failed to create subWindow Cause: ${err.message});
    return;
  }
  try {
    // 设置子窗口加载页
    windowClass.setUIContent('pages/ResizeWindowPage');
    // 设置子窗口左上角坐标
    windowClass.moveWindowTo(0, 200);
    // 展示子窗口
    windowClass.showWindow()
  } catch (err) {
    console.error(failed to create subWindow Cause:${err});
  }
})

// 子窗口的根布局页面 ResizeWindowPage.ets：
import { componentUtils, inspector, window } from '@kit.ArkUI';
export const SUB_WINDOW_NAME = "ResizeSubWindow"
const RESIZE_WINDOW_ROOT_ID = "RESIZE_WINDOW_ROOT_ID"
@Entry
@Component
struct ResizeWindowPage {
  @State message: string = 'Hello World';
  @State windowStage: window.WindowStage = AppStorage.get('windowStage') as window.WindowStage
  @State isPageA: boolean = true
  private listener: inspector.ComponentObserver = inspector.createComponentObserver(RESIZE_WINDOW_ROOT_ID);
  @State rootWidth: number = 350
  @State rootHeight: number = 700
  aboutToAppear(): void {
    // 监听id为RESIZE_WINDOW_ROOT_ID的组件layout事件
    this.listener.on('layout', () => {
      setTimeout(() => {
        // 根组件大小重新设置
        this.rootWidth = px2vp(componentUtils.getRectangleById(RESIZE_WINDOW_ROOT_ID).size.width)
        this.rootHeight = px2vp(componentUtils.getRectangleById(RESIZE_WINDOW_ROOT_ID).size.height)
        // 窗口大小重新设置
        window.findWindow(SUB_WINDOW_NAME).resize(componentUtils.getRectangleById(RESIZE_WINDOW_ROOT_ID).size.width, componentUtils.getRectangleById(RESIZE_WINDOW_ROOT_ID).size.height)
      })
    })
  }
  rootComponentInit() {
    this.rootWidth = 350
    this.rootHeight = 700
  }
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      if (this.isPageA) {
        ComponentA({
          click: () => {
            this.rootComponentInit()
            this.isPageA = false
          }
        }).id(RESIZE_WINDOW_ROOT_ID)
      } else {
        ComponentB({
          click: () => {
            this.rootComponentInit()
            this.isPageA = true
          }
        }).id(RESIZE_WINDOW_ROOT_ID)
      }
      Text("Stack")
    }
    .width(this.rootWidth)
    .height(this.rootHeight)
    .backgroundColor(Color.Blue)
  }
}
@Component
export struct ComponentA {
  click: () => void = () => {}
  build() {
    Column() {
      Text("ComponentA")
        .fontSize(30)
        .onClick(() => {
          this.click()
        })
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Red)
    .width(300)
    .height(300)
  }
}
@Component
export struct ComponentB {
  click: () => void = () => {}
  build() {
    Column() {
      Text("ComponentB")
        .fontSize(30)
        .onClick(() => {
          this.click()
        })
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Green)
    .width(150)
    .height(150)
  }
}