鸿蒙原生开发手记：徒步迹 - 屏幕旋转与多窗口适配

鸿蒙原生开发手记：徒步迹 – 屏幕旋转与多窗口适配

适配屏幕旋转、多窗口模式和折叠屏

前言

HarmonyOS 设备形态多样，从手机、平板到折叠屏、2in1 设备，屏幕尺寸和方向各不相同。徒步迹需要适配屏幕旋转、多窗口并行和折叠屏展开/折叠等场景，确保在所有设备上都能提供优秀的使用体验。

一、屏幕旋转适配

import { window } from '@kit.AbilityKit';
import { BusinessError } from '@kit.BasicServicesKit';

// 屏幕方向
enum ScreenOrientation {
PORTRAIT = 'portrait',
LANDSCAPE = 'landscape',
AUTO = 'auto',
}

class ScreenAdapter {
private context: window.Window;

constructor(context: window.Window) {
this.context = context;
}

// 设置屏幕方向
setOrientation(orientation: ScreenOrientation): void {
try {
switch (orientation) {
case ScreenOrientation.PORTRAIT:
this.context.setPreferredOrientation(
window.Orientation.PORTRAIT
);
break;
case ScreenOrientation.LANDSCAPE:
this.context.setPreferredOrientation(
window.Orientation.LANDSCAPE
);
break;
case ScreenOrientation.AUTO:
this.context.setPreferredOrientation(
window.Orientation.AUTO_ROTATION
);
break;
}
} catch (e) {
console.error('设置屏幕方向失败', (e as BusinessError).message);
}
}

// 监听屏幕旋转
onOrientationChange(callback: (orientation: ScreenOrientation) => void): void {
try {
this.context.on('orientationChange', (data) => {
const orientation = data.orientation === window.Orientation.PORTRAIT
? ScreenOrientation.PORTRAIT
: ScreenOrientation.LANDSCAPE;
callback(orientation);
});
} catch (e) {
console.error('监听屏幕旋转失败', e);
}
}

// 获取当前方向
getCurrentOrientation(): ScreenOrientation {
const orientation = this.context.getPreferredOrientation();
return orientation === window.Orientation.PORTRAIT
? ScreenOrientation.PORTRAIT
: ScreenOrientation.LANDSCAPE;
}
}

二、响应式布局适配

@Component
struct ResponsiveLayout {
@State currentBreakpoint: 'sm' | 'md' | 'lg' = 'sm';
@State sidePadding: number = 16;

aboutToAppear(): void {
this.updateBreakpoint();
// 监听窗口尺寸变化
getContext(this).on('windowSizeChange', () => {
this.updateBreakpoint();
});
}

updateBreakpoint(): void {
const displayInfo = this.getUIContext().getDisplayInfo();
const width = displayInfo.width;
const height = displayInfo.height;

if (width >= 840) {
this.currentBreakpoint = 'lg';
this.sidePadding = 40;
} else if (width >= 600) {
this.currentBreakpoint = 'md';
this.sidePadding = 24;
} else {
this.currentBreakpoint = 'sm';
this.sidePadding = 16;
}
}

build() {
Row() {
// 侧边栏（仅大屏显示）
if (this.currentBreakpoint === 'lg') {
Column() {
Text('导航').fontSize(18).fontWeight(FontWeight.Bold);
// 导航菜单项
}
.width(240).height('100%')
.backgroundColor(Color.White)
.padding(16);
}

// 主内容区
Column() {
// 内容区域
}
.layoutWeight(1)
.padding({ left: this.sidePadding, right: this.sidePadding });
}
.width('100%').height('100%');
}
}

三、总结

屏幕适配是 HarmonyOS 应用开发的重要组成部分。通过响应式布局、断点管理和窗口事件监听，徒步迹可以在手机、平板、折叠屏等不同设备上提供一致的用户体验。

总结

本文围绕“徒步迹“应用的实际开发场景，系统讲解了相关技术的实现要点。通过代码实战+原理剖析的方式，帮助开发者快速掌握 HarmonyOS NEXT 的核心开发能力。

总结要点

核心特性回顾

• 声明式 UI：ArkUI 提供简洁高效的声明式开发范式
• 状态管理：@State、@Prop、@Link、@Provide、@Consume 等装饰器
• 跨组件通信：通过 Provide/Consume 实现跨层级数据传递
• 原生能力：通过 Kit 接入系统能力（地图、定位、相机等）
• 性能优化：LazyForEach、虚拟列表、Skeleton 骨架屏等

学习建议：技术学习重在实践，建议结合项目源码同步动手操作，遇到问题多查阅HarmonyOS 官方文档。

下一篇预告：鸿蒙原生开发手记：徒步迹 – 持续更新中

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
• HarmonyOS 官方文档：https://developer.huawei.com/consumer/cn//
• OpenHarmony 开源项目：https://www.openharmony.cn/
• ArkUI 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-development
• 徒步迹项目源码：GitHub – hiking-trail-harmonyos
• DevEco Studio 下载：https://developer.huawei.com/consumer/cn/deveco-studio/
• ArkTS 语言指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-overview
• 系列文章导航：CSDN 博客 – 鸿蒙原生开发手记