HarmonyOS鸿蒙Next中怎么根据组件宽度适应横排或竖排

在HarmonyOS Next中，可以通过Flex容器配合wrap属性以及@ohos.mediaquery媒体查询来实现组件根据可用宽度自动切换横排与竖排布局。核心思路是让容器在主轴空间不足时允许子组件换行。

方案一：使用Flex布局的wrap模式（推荐）

这是最简洁、符合声明式开发范式的方法。将两个组件放入一个Flex容器，并设置wrap属性为FlexWrap.Wrap。当主轴（默认为水平方向）空间不足时，第二个组件会自动换行，形成竖排效果。

示例代码：

// 示例ArkTS代码
import { Flex, Text, Column } from '@kit.ArkUI';

@Entry
@Component
struct AdaptiveLayoutExample {
  build() {
    // 使用Flex容器，主轴为水平方向，允许换行
    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
      // 第一个组件，设置合适的flexGrow或固定宽度
      Text('组件A')
        .fontSize(20)
        .backgroundColor(Color.Blue)
        .padding(10)
        .flexGrow(1) // 可伸缩，与兄弟组件共享剩余空间
        .constraintSize({ minWidth: 150 }) // 设置最小宽度

      // 第二个组件
      Text('组件B')
        .fontSize(20)
        .backgroundColor(Color.Green)
        .padding(10)
        .flexGrow(1)
        .constraintSize({ minWidth: 150 })
    }
    .width('100%') // 容器宽度占满父组件
    .padding(10)
  }
}

原理：

• FlexDirection.Row 设置主轴为水平方向，子组件默认尝试横向排列。
• FlexWrap.Wrap 是关键。当两个子组件的最小宽度之和（本例中为 150 + 150 + 内边距和外边距）超过Flex容器的可用宽度时，第二个Text组件会自动换行到下一行，实现竖排效果。
• flexGrow(1) 让两个组件在同行时能均分剩余空间。
• .width('100%') 确保容器宽度与屏幕或父组件宽度同步变化。

方案二：结合媒体查询进行断点控制

如果需要更精确地在特定屏幕宽度下切换布局方向（例如，不仅仅依赖于组件自身的最小宽度，而是希望在某个明确的屏幕断点改变整体排列方向），可以结合媒体查询。

示例代码：

import { Flex, Text, Column } from '@kit.ArkUI';
import { mediaQuery } from '@kit.ArkUI';

@Entry
@Component
struct AdaptiveLayoutWithMediaQuery {
  // 定义一个状态变量，根据媒体查询结果控制布局方向
  @State isVertical: boolean = false;

  aboutToAppear() {
    // 监听屏幕宽度变化，例如当屏幕宽度小于400vp时，切换为竖排
    let listener = mediaQuery.matchMediaSync('(max-width: 400vp)');
    listener.on('change', (result: mediaQuery.MediaQueryResult) => {
      this.isVertical = result.matches; // 如果匹配条件（宽度<=400vp），则isVertical为true
    });
  }

  build() {
    // 根据isVertical状态决定使用Column（竖排）还是Flex Row横排（可换行）
    if (this.isVertical) {
      // 竖排布局
      Column() {
        Text('组件A')
          .fontSize(20)
          .backgroundColor(Color.Blue)
          .padding(10)
          .width('100%')

        Text('组件B')
          .fontSize(20)
          .backgroundColor(Color.Green)
          .padding(10)
          .width('100%')
      }
      .width('100%')
      .padding(10)
    } else {
      // 横排布局（使用允许换行的Flex，作为兜底）
      Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
        Text('组件A')
          .fontSize(20)
          .backgroundColor(Color.Blue)
          .padding(10)
          .flexGrow(1)
          .constraintSize({ minWidth: 150 })

        Text('组件B')
          .fontSize(20)
          .backgroundColor(Color.Green)
          .padding(10)
          .flexGrow(1)
          .constraintSize({ minWidth: 150 })
      }
      .width('100%')
      .padding(10)
    }
  }
}

总结与选择

• 追求简单自适应：直接使用方案一（Flex + Wrap）。这是最符合声明式UI设计理念的做法，布局引擎会自动计算空间并决定是否换行，无需手动判断屏幕尺寸。
• 需要明确的断点控制：如果业务逻辑要求必须在某个精确的屏幕宽度（如400vp）切换布局，而不是单纯因为组件内容放不下，则使用方案二（媒体查询）。它可以实现更复杂的响应式逻辑。

对于你描述的需求“如果能在同一行放置，则横排；如果超出屏幕，则竖排”，方案一完全满足且实现更优雅。只需正确设置父容器的wrap属性以及子组件的constraintSize或flexGrow即可，系统会自动处理换行逻辑。