HarmonyOS鸿蒙Next中怎么根据设备类型实现组件横排和竖排

HarmonyOS鸿蒙Next中怎么根据设备类型实现组件横排和竖排 有2小块组件，怎么根据设备类型实现手机横排，PC竖排


更多关于HarmonyOS鸿蒙Next中怎么根据设备类型实现组件横排和竖排的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

手机横排，PC竖排：

import { deviceInfo } from '@kit.DeviceInfoKit';

// 获取设备类型
let deviceType: string = deviceInfo.deviceType;

// 根据设备类型确定布局方向
let layoutDirection: FlexDirection;
if (deviceType === 'phone' || deviceType === 'default') {
  // 手机设备使用横向排列
  layoutDirection = FlexDirection.Row;
} else if (deviceType === '2in1' || deviceType === 'tablet') {
  // PC或平板设备使用纵向排列
  layoutDirection = FlexDirection.Column;
} else {
  // 其他设备类型使用默认方向
  layoutDirection = FlexDirection.Row;
}

// 在组件中使用确定的布局方向
@Entry
@Component
struct MyComponent {
  build() {
    Flex({ direction: layoutDirection }) {
      // 第一个小块组件
      Text('组件1')
        .width(100)
        .height(100)
        .backgroundColor(Color.Red)
      
      // 第二个小块组件
      Text('组件2')
        .width(100)
        .height(100)
        .backgroundColor(Color.Blue)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

更多关于HarmonyOS鸿蒙Next中怎么根据设备类型实现组件横排和竖排的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可以根据布局概况选择合适的容器组件来实现自适应布局，例如媒体查询实现不同屏幕根据不同设备类型或同设备不同状态修改应用的样式，具体可参考文档：

这种场景都是通过一多来实现的，一多可以通过响应式来处理也可以通过媒体查询来处理：
[媒体查询 (@ohos.mediaquery)-UI系统场景化能力-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-media-query)

通过BreakpointSystem监听屏幕断点变化，区分不同设备类型：

// 定义断点状态变量
@State currentBreakpoint: string = 'sm';

// 初始化断点系统
BreakpointSystem.register({
sm: { value: '320vp<=width<600vp' },   // 手机竖屏
md: { value: '600vp<=width<840vp' },   // 手机横屏/折叠屏
lg: { value: '840vp<=width' }          // PC/平板
}).onBreakpointChange((breakpoint) => {
this.currentBreakpoint = breakpoint;
});

通过Flex组件的direction属性实现横竖排切换：

Flex({ direction: this.getFlexDirection() }) {
ComponentA()
ComponentB()
}
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)

// 根据断点返回排列方向
private getFlexDirection() {
return (this.currentBreakpoint === 'lg') ? FlexDirection.Column : FlexDirection.Row;
}

对于更复杂的布局，可使用Grid组件结合响应式列数：

GridRow() {
GridCol({ span: { sm: 12, lg: 6 } }) { // 手机单列，PC双列
ComponentA()
}
GridCol({ span: { sm: 12, lg: 6 } }) {
ComponentB()
}
}
.columnsGap(12)
.breakpointSystem({
sm: { span: 12 },
lg: { span: 6 }
})

【背景知识】

可以参考一次开发，多端部署： 一多开发的布局一般有两种方式，自适应布局和响应式布局。

  • 自适应布局： 当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。当前自适应布局能力有7种：拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力。自适应布局能力可以实现界面显示随外部容器大小连续变化。
  • 响应式布局： 当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。当前响应式布局能力有3种：断点、媒体查询、栅格布局。响应式布局可以实现界面随外部容器大小有不连续变化，通常不同特征下的界面显示会有较大的差异。

【解决方案】

在HarmonyOS Next中，通过@ohos.mediaquery媒体查询API实现。使用mediaquery.matchMediaSync监听设备方向变化，在回调中根据orientation属性判断横竖屏。组件布局使用Flex容器，设置direction属性为FlexDirection.Row（横排）或FlexDirection.Column（竖排）。示例代码片段：mediaQuery.matchMediaSync('(orientation: landscape)').on('change', (result) => { if(result.matches) { // 横屏布局 } else { // 竖屏布局 } })。

在HarmonyOS Next中，可以根据设备类型（如手机、平板、PC）或屏幕尺寸，通过响应式布局能力实现组件排列方式的动态调整。核心方法是使用 媒体查询（@ohos.mediaquery） 和 栅格系统（GridRow/GridCol） 或 Flex布局。

核心实现方案

1. 使用媒体查询（推荐）

媒体查询可以监听设备屏幕特性（如宽度、高度、方向），并根据条件应用不同的样式或逻辑。

示例代码：

// 在EntryAbility的onWindowStageCreate或页面中设置媒体查询
import mediaquery from '[@ohos](/user/ohos).mediaquery';

// 定义手机横排、PC竖排的断点条件
let phoneCondition = '(max-width: 600px) and (orientation: landscape)'; // 手机横屏
let pcCondition = '(min-width: 600px)'; // PC或平板

// 监听手机横屏条件
let listener1 = mediaquery.matchMedia(phoneCondition, (mediaQueryResult) => {
  if (mediaQueryResult.matches) {
    // 满足条件：手机横屏，设置组件横排
    // 例如，通过状态变量控制Flex布局方向为Row
    this.isRowLayout = true; // 控制布局方向的状态变量
  }
});

// 监听PC条件
let listener2 = mediaquery.matchMedia(pcCondition, (mediaQueryResult) => {
  if (mediaQueryResult.matches) {
    // 满足条件：PC/平板，设置组件竖排
    this.isRowLayout = false;
  }
});

// 在组件销毁时取消监听
listener1.off();
listener2.off();

在UI布局中使用状态变量控制排列方向：

// 使用Flex布局，根据isRowLayout动态设置direction
Flex({ direction: this.isRowLayout ? FlexDirection.Row : FlexDirection.Column }) {
  // 两个子组件
  Component1()
  Component2()
}

2. 使用栅格系统（GridRow/GridCol）

栅格系统能根据屏幕宽度自动调整列数和组件排列。

示例代码：

// 设置栅格行，根据断点调整列数
GridRow({
  breakpoints: { value: ['320px', '600px'] }, // 定义断点
  columns: { 0: 1, 1: 2 } // 屏幕宽度<600px时1列（竖排），>=600px时2列（横排）
}) {
  GridCol({ span: 1 }) {
    Component1()
  }
  GridCol({ span: 1 }) {
    Component2()
  }
}
  • 手机横屏：通常屏幕宽度仍小于600px，但方向为横向，可通过媒体查询结合栅格实现横排。
  • PC：屏幕宽度≥600px，自动使用2列布局，组件横排。

3. 使用屏幕方向API

如果仅需根据横竖屏调整，可直接使用屏幕方向API。

import window from '[@ohos](/user/ohos).window';

// 获取窗口实例并监听方向变化
window.getLastWindow(this.context).then((win) => {
  win.on('windowOrientationChange', (orientation) => {
    if (orientation === window.Orientation.HORIZONTAL) {
      // 横屏：设置横排
      this.isRowLayout = true;
    } else {
      // 竖屏：设置竖排
      this.isRowLayout = false;
    }
  });
});

总结建议

  • 优先使用媒体查询：可综合判断设备类型、屏幕尺寸和方向，灵活性高。
  • 结合布局组件：使用Flex或GridRow/GridCol，根据媒体查询结果动态调整direction或columns。
  • 测试多设备：在DevEco Studio的Previewer中切换设备类型和方向，验证布局效果。

通过上述方法，即可实现手机横屏时组件横排、PC（或大屏）时组件竖排的响应式布局。

回到顶部