在ArkTS中，如何实现组件的自动布局调整，以适应不同屏幕尺寸和方向的变化？

Question

在ArkTS中，如何实现组件的自动布局调整，以适应不同屏幕尺寸和方向的变化？
本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】，欢迎正在阅读的你也加入。

Answer 1

Flex 布局可以根据容器的大小自动调整子组件的位置和大小。

@Entry
@Component
struct AutoLayoutExample {
  build() {
    Column() {
      // 使用 Flex 布局的容器
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
        Text('This text will adjust.')
         .fontSize(20)
        Button('Button')
         .width('100%')
      }
    }
  }
}

在这个例子中，Flex容器中的Text和Button组件会根据容器的大小自动调整位置和大小。
响应式布局
可以使用@Watch装饰器来监听屏幕尺寸和方向的变化，并相应地调整组件的布局。

import { onWindowResize } from '@ohos.application.window';

@Entry
@Component
struct ResponsiveLayoutExample {
  @State width: number = 0;
  @State height: number = 0;

  constructor() {
    onWindowResize((windowSize) => {
      this.width = windowSize.width;
      this.height = windowSize.height;
    });
  }

  build() {
    Column() {
      if (this.width > 500) {
        Text('Large Screen')
         .fontSize(30)
      } else {
        Text('Small Screen')
         .fontSize(20)
      }
    }
  }
}

本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】，欢迎正在阅读的你也加入。