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

核心思路如下：

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});
  }
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

// 子窗口的根布局页面 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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.