鸿蒙5.0实战开发之一多窗口适配开发实践

最新推荐文章于 2025-05-01 15:19:33 发布
最新推荐文章于 2025-05-01 15:19:33 发布
阅读量991 收藏 22
点赞数 11
分类专栏： 移动开发 HarmonyOS 鸿蒙开发 文章标签： harmonyos 鸿蒙 ui 交互 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mn_xiaona666/article/details/146989512
版权

往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）

✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✏️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✏️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✏️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✏️ 记录一场鸿蒙开发岗位面试经历~

✏️ 持续更新中……

概述

在一多开发过程中，开发者需要适配多种不同 窗口类型（WindowType） ，且同一窗口类型在不同设备上会有不同的属性（尺寸大小、系统区域、是否沉浸、自由窗口有标题栏等），针对窗口类型及属性的差异所产生的问题，本文将提供相应说明以及解决方案指导。包含以下常见场景：

  • 应用窗口尺寸发生变化时页面如何更新断点从而刷新页面。
  • 不同设备的横竖屏旋转采取怎样的策略以及实现方案。
  • 应用窗口沉浸式页面如何实现。
  • PC/2in1设备中使用自由窗如何适配窗口化、标题栏、全屏沉浸式。

窗口尺寸变化更新断点

应用页面展示时，要求窗口宽度在一定范围内，页面展示相同的页面布局。基于该原则，将窗口宽度划分为不同的范围（即断点），当窗口宽度从一个断点变化到另一个断点时，改变页面布局（如将页面内容从单列排布调整为双列排布甚至三列排布等）以获得更好的显示效果。

在实际开发过程中，仅靠窗口宽度计算的横向断点，无法区分所有窗口场景，比如手机切换横屏和折叠屏展开窗口时宽度都在600-840vp，即横向断点均为“md”，但两者的页面布局不同。因此，需要引入纵向断点并监听横纵向断点变化，实现区分多设备场景以及窗口变化场景。

实现原理

横向断点使用窗口宽度计算，纵向断点使用窗口的宽高比计算，详细断点分类可以参考 横纵向断点的设计原理 。根据不同断点对应的UX设计，使用横向及纵向断点判断并展示不同的页面布局。

使用 window (窗口) 的用 getWindowProperties() 接口获取窗口创建时的宽高计算横纵向断点。并使用on(‘windowSizeChange’) 接口监听窗口尺寸变化，窗口更新时获取变更后的窗口尺寸，更新横纵向断点。

开发步骤

  1. 在UIAbility的 onWindowStageCreate 生命周期回调中，获取窗口对象后使用 getWindowProperties() 接口获取窗口创建时的宽高计算断点，保存横纵向断点至全局状态存储中。并在on(‘windowSizeChange’)接口中监听窗口尺寸变化，窗口尺寸变化时计算横纵向断点，并更新全局状态存储。
  2. 页面使用全局状态存储获取当前窗口的横纵向断点，当横纵向断点更新时，按照实际页面逻辑调整窗口旋转策略、沉浸式样式等窗口属性或其他页面布局。

窗口横竖屏旋转适配

在开发一多应用时，需要兼容多设备上的旋转策略。当前应用开发中通常使用以下两种方案控制旋转策略。伴随着鸿蒙生态拓展，这两种方案也带来一些问题。

方案一：依靠设备类型或设备状态判断是否支持旋转

  1. 如果设备类型为平板，或折叠屏展开状态为展开态（仅考虑了折叠屏X系列的情况），则应用支持旋转。
  2. 其他情况下应用竖屏显示。
if (deviceInfo.deviceType === 'tablet' || display.getFoldStatus() === display.FoldStatus.FOLD_STATUS_EXPANDED) {
  windowObj.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
} else {
  windowObj.setPreferredOrientation(window.Orientation.PORTRAIT);
}

采取当前方案会导致以下问题：

  • 在小折叠屏手机（Pocket系列）的展开态内屏上不希望应用旋转，应用却能够旋转。
  • 在小折叠屏手机（Pocket系列）的折叠态外屏（类方屏）上希望应用旋转，应用却不能够旋转。
  • 在三折叠屏手机（XT系列）的三屏展开态内屏上希望应用旋转，应用却不能够旋转。

方案二：根据窗口宽高判断是否支持旋转

  1. 如果设备屏幕宽或高有一边不小于840vp，则应用支持旋转。
let displayInfo: display.Display = display.getDefaultDisplaySync();
let displayWidth: number = px2vp(displayInfo.width);
let displayHeight: number = px2vp(displayInfo.height);
if (displayWidth >= 840 || displayHeight >= 840)  {
  windowObj.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
} else {
  windowObj.setPreferredOrientation(window.Orientation.PORTRAIT);
}
  1. 其他情况下应用竖屏显示。

采取当前方案会导致以下问题：

  • 在部分直板机（pura70）或小折叠（Pocket2系列）的展开态上不希望应用旋转，因为设备的高度超过840vp，应用却能够旋转。
  • 在折叠屏（X系列）展开态、小折叠（Pocket系列）折叠态、三折叠（XT系列）的双屏显示——类方屏上希望应用旋转，应用却不支持旋转。

实现原理

为解决以上方案的不足，根据当前鸿蒙生态设备的实际使用场景，建议旋转策略如下：

设备场景是否需要支持横竖屏旋转
手机（直板机）由应用决定是否需要支持，默认不支持
折叠屏-小折叠（Pocket系列）内屏（正面大屏）：同直板机手机
外屏（背面小屏）：类方屏需要支持
折叠屏（X系列）内屏（展开状态）：类方屏需要支持
外屏（折叠状态）：同直板机手机
三折叠（XT系列）F态（单屏显示）：同直板机手机
M态（双屏显示）：类方屏需要支持
G态（三屏显示）：需要支持
平板全场景需要支持
PC/2in1系统不响应应用方向事件，无法支持

根据以上常用设备类型上的应用窗口属性，将一多横竖屏旋转适配方案整理为：

  1. 应用窗口宽度和高度的最小值大于等于600vp（X系列折叠屏）时，推荐支持旋转。
  2. 应用窗口高宽比在[0.8, 1.2)区间内（类方屏）时，推荐支持旋转。
  3. 设备类型为平板时，推荐支持旋转。
  4. 其他情况推荐竖屏显示（直板机）。

示例代码

针对一多横竖屏推荐的旋转方案，通用的适配方案参考如下代码。

import { UIAbility } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { BusinessError, deviceInfo } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
  windowObj: window.Window | undefined = undefined;
  private onWindowSizeChange: (data: window.Size) => void = (data: window.Size) => {
    this.setDefaultOrientation();
  }
  // ...
  setDefaultOrientation(): void {
    const BREAKPOINT_MD = 600;
    let windowRect: window.Rect = this.windowObj!.getWindowProperties().windowRect;
    let windowWidthVp: number = px2vp(windowRect.width);
    let windowHeightVp: number = px2vp(windowRect.height);
    let aspectRatio: number = windowHeightVp / windowWidthVp;
    if (Math.min(windowWidthVp, windowHeightVp) >= BREAKPOINT_MD || (aspectRatio < 1.2 && aspectRatio >= 0.8) || deviceInfo.deviceType === 'tablet') {
      // Rotation supported.
      this.windowObj?.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
    } else {
      // Portrait display.
      this.windowObj?.setPreferredOrientation(window.Orientation.PORTRAIT);
    }
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    windowStage.getMainWindow().then((windowObj) => {
      this.windowObj = windowObj;
      this.setDefaultOrientation();
      this.windowObj.on('windowSizeChange', this.onWindowSizeChange);
    }).catch((err: BusinessError) => {
      hilog.error(0x0000, 'testTag', `Failed to obtain the main window. Cause code: ${err.code}, message: ${err.message}`);
    });
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }
  // ...
}

窗口沉浸式页面适配

应用开发过程中，窗口默认为非沉浸式，即页面无法拓展至顶部状态栏及底部导航栏等避让区。此时存在避让区与页面颜色不一致以及底部导航栏空间无法利用的问题，因此需要手动设置沉浸式。

实现原理

窗口沉浸式页面通过应用页面延伸到状态栏和导航栏的方式实现。设置应用沉浸式布局后，为避免应用布局被顶部状态栏或底部导航栏遮挡，需要获取窗口规避区，在页面布局中进行避让。

使用 setWindowLayoutFullScreen(true) 方法设置窗口为全屏模式，页面布局会拓展到顶部状态栏及底部导航栏，此时部分布局会被遮挡。通过 getWindowAvoidArea() 接口以及 on(‘avoidAreaChange’) 接口获取到系统避让区高度，据此在页面顶部及底部使用padding属性避让状态栏和导航栏。

开发步骤

  1. 在UIAbility的 onWindowStageCreate 生命周期回调中，获取窗口对象后使用setWindowLayoutFullScreen(true)设置窗口为全屏模式。通过getWindowAvoidArea()接口获取当前系统避让区高度（包含顶部状态栏高度及底部导航栏高度），保存至全局状态存储中。并使用on(‘avoidAreaChange’)接口监听避让区变化获取避让区变化后的高度，同步至全局状态存储。
import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  // ...
  private onAvoidAreaChange: (avoidArea: window.AvoidAreaOptions) => void = (avoidArea: window.AvoidAreaOptions) => {
    if (avoidArea.type === window.AvoidAreaType.TYPE_SYSTEM) {
      // Updates the height of the top status bar.
      AppStorage.setOrCreate('topAvoidHeight', px2vp(avoidArea.area.topRect.height));
    } else if (avoidArea.type === window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR) {
      // Updated the bottom navigation bar.
      AppStorage.setOrCreate('bottomAvoidHeight', px2vp(avoidArea.area.bottomRect.height));
    }
  };

  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.getMainWindow((err, window: window.Window) => {
      // ...
      window.setWindowLayoutFullScreen(true);
      let topAvoidHeight: window.AvoidArea = window.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
      AppStorage.setOrCreate('topAvoidHeight', px2vp(topAvoidHeight.topRect.height));
      let bottomAvoidHeight: window.AvoidArea =
        window.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
      AppStorage.setOrCreate('bottomAvoidHeight', px2vp(bottomAvoidHeight.bottomRect.height));
    });
    window.on('avoidAreaChange', this.onAvoidAreaChange);

    // ...
  }
}
  1. 在应用页面中获取全局状态存储中的避让区高度，在页面顶部及底部使用padding属性避让状态栏和导航栏。
@Entry
@Component
struct Index {
  @StorageLink('topAvoidHeight') topAvoidHeight: number = 0;
  @StorageLink('bottomAvoidHeight') bottomAvoidHeight: number = 0;

  build() {
    Column() {
      // ...
    }
    .height('100%')
    .width('100%')
    .padding({
      top: this.topAvoidHeight,
      bottom: this.bottomAvoidHeight
    })
  }
}

应用窗口化适配

在PC/2in1设备上，应用正常启动默认应该为自由窗口模式而非全屏。在应用适配PC/2in1设备过程中，实际存在应用启动默认全屏模式而非推荐的自由窗口，以及拖动自由窗口导致尺寸过小页面布局异常的问题。

实现原理

  • 启动默认全屏问题
    PC/2in1设备启动默认全屏是因为应用在其他设备上为实现沉浸式使用setWindowLayoutFullScreen(true)接口设置全屏导致的。需要判断PC/2in1设配类型，仅在非PC/2in1设备时设置全屏。

  • 自由窗口过小导致页面布局异常问题
    自由窗口支持自由拖动改变大小，可以通过开发实际规格配置窗口的最小尺寸，保证页面的正常显示。

示例代码

  • 在UIAbility的onWindowStageCreate生命周期回调中获取窗口对象后，仅设备不为PC/2in1时窗口设置为全屏。
import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { deviceInfo } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
  // ...
  onWindowStageCreate(windowStage: window.WindowStage) {
    // ...
    let windowClass: window.Window | null = null;
    windowStage.getMainWindow().then((data: window.Window) => {
      // ...
      windowClass = data;
      if (deviceInfo.deviceType !== '2in1') {
        windowClass.setWindowLayoutFullScreen(true);
      }
    });
    // ...
  }
}
  • 在“src/main/ets/module.json5”文件的 abilities标签 中配置窗口的最小尺寸。
"abilities": [
  {
    // ...
    "minWindowWidth": 331,
    "minWindowHeight": 600,
    // ...
],

应用窗口化标题栏沉浸式适配

在PC/2in1设备上，自由窗口默认包含支持移动、缩小、放大、关闭窗口的标题栏。开发者可通过设置应用窗口的标题栏不可见，将应用页面拓展至原标题栏区域，实现窗口沉浸式。效果图如下：

实现原理

PC/2in1设备窗口标题栏包含应用图标，应用名称，以及三键（全屏/还原、最小化、关闭）。通过设置标题栏不可见，隐藏应用图标及应用名称保留三键区的方式实现窗口沉浸式。

使用 setWindowDecorVisible(false) 设置窗口标题栏不可见，此时应用页面拓展至标题栏区域。使用 setWindowDecorHeight ()接口设置导航栏高度，控制右上角三键区显示以及显示高度。

示例代码

在UIAbility的 onWindowStageCreate 生命周期回调中，判断PC/2in1设备类型，调用setWindowDecorVisible(false)接口设置标题栏不可见，调用setWindowDecorHeight()接口设置右上角三键区的高度。

import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { deviceInfo } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

export default class EntryAbility extends UIAbility {
  // ...
  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
    // ...
    windowStage.getMainWindow().then((data: window.Window) => {
      let deviceTypeInfo: string = deviceInfo.deviceType;
      if (deviceTypeInfo === '2in1') {
        // Set the title bar of the 2in1 device to be invisible after the loadContent() call takes effect.
        data.setWindowDecorVisible(false);
        // When the title bar is invisible, set the height of the title bar and control the height of the three buttons (full screen/restore, maximize, and close) in the upper right corner.
        data.setWindowDecorHeight(64);
      }
    })
    // ...
  }
}

自由窗口的全屏沉浸式适配

在视频类应用适配PC/2in1设备时，需要实现视频播放页在自由窗口与全屏沉浸式切换功能。

实现原理

通过调用窗口状态操作的接口，实现应用全屏沉浸式与自由窗口的切换。以长视频应用为例，视频播放界面，在PC/2in1设备上需要支持沉浸式体验，适配指导如下：

状态用户操作使用接口
应用窗口化播放视频执行以下操作后应进入沉浸式视频全屏播放：
* 鼠标双击视频区域
* 用户点击视频全屏按钮		maximize() ：设置窗口最大化时的布局效果，接口默认传入参数为ENTER_IMMERSIVE实现最大化时进入沉浸式布局效果。
沉浸式全屏播放视频执行以下操作后应退出全屏沉浸式回到窗口状态：
* 按下ESC键
* 点击退出全屏按钮		recover()：还原为浮动窗口，恢复为进入全屏前的大小和和位置。

开发步骤

  1. 双击视频区域以及点击视频全屏按钮分别采用TapGesture双击事件以及onClick点击事件实现。事件触发后获取当前窗口模式，若窗口模式为自由窗口，调用maximize()接口最大化窗口进入沉浸式全屏。
import { BusinessError } from '@kit.BasicServicesKit';
import { window } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Observed
export class WindowUtil {
  private mainWindowClass?: window.Window;

  // ...
  maximize(): void {
    if (this.mainWindowClass!.getWindowStatus() === window.WindowStatusType.FLOATING) {
      this.mainWindowClass!.maximize()
        .then(() => {
          hilog.info(0x0000, 'testTag', '%{public}s', `Succeed in maximizing the window.`);
        })
        .catch((err: BusinessError) => {
          hilog.error(0x0000, 'testTag', `Failed to maximize the window. Code: ${err.code}, message: ${err.message}`,
            JSON.stringify(err) ?? '');
        });
    }
  }
  // ...
}
  1. 按下ESC按键以及点击退出全屏按钮分别采用onKeyEvent按键事件以及onClick点击事件实现。事件触发后获取当前窗口模式，若窗口模式为全屏模式，调用recover()恢复为进入全屏前的浮动窗口。
import { BusinessError } from '@kit.BasicServicesKit';
import { window } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Observed
export class WindowUtil {
  private mainWindowClass?: window.Window;

  // ...
  recover(): void {
    if (this.mainWindowClass!.getWindowStatus() === window.WindowStatusType.FULL_SCREEN) {
      this.mainWindowClass!.recover()
        .then(() => {
          hilog.info(0x0000, 'testTag', '%{public}s', `Succeed in recovering the window.`);
        })
        .catch((err: BusinessError) => {
          hilog.error(0x0000, 'testTag', `Failed to recover the window. Code: ${err.code}, message: ${err.message}`,
            JSON.stringify(err) ?? '');
        });
    }
  }
  // ...
}

常见问题

不同设备默认的窗口模式是什么

手机、折叠屏、平板上应用的默认窗口模式为全屏模式，windowStatusType为1。PC/2in1上应用自由窗口的窗口模式为自由悬浮形式窗口模式，windowStatusType为4，全屏后为全屏模式，windowStatusType为1。窗口模式见下表：

名称值说明
UNDEFINED0表示APP未定义窗口模式。
FULL_SCREEN1表示APP全屏模式。
MAXIMIZE2表示APP窗口最大化模式。
MINIMIZE3表示APP窗口最小化模式。
FLOATINGSPLIT_SCREEN4
5		表示APP自由悬浮形式窗口模式。
表示APP分屏模式。
基于HarmonyOS 5.0（NEXT）与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
一键难忘的博客
12-27 2240
DevEco Studio 是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。同时支持卡片的零代码开发，降低开发门槛和提升界面开发效率。
响应式开发如何设置断点，小屏幕界面该如何显示（有动图）
贝格前端工场的博客
02-05 1385
响应式开发是一种网站或应用程序开发的方法，旨在使其能够适应不同设备和屏幕尺寸的显示。通过使用响应式设计，可以确保在不同的设备上提供一致的用户体验，并使内容在各种屏幕上呈现出最佳的布局和样式。屏幕断点是在响应式开发中使用的特定屏幕尺寸的阈值。通过设置屏幕断点，可以根据设备的屏幕尺寸来应用不同的布局和样式。例如，可以设置一个屏幕断点，使得在较小的移动设备上显示简化的布局和较小的字体大小，而在较大的台式机上显示更复杂的布局和较大的字体大小。设置屏幕断点的目的是为了提供更好的用户体验。
Harmony OS“一多” 详解：基于窗口变化的断点自适应实现
qq_55376032的博客
04-05 723
本文探讨了 IT 开发中的 “一多” 问题，分别从界面级、功能级和工程级展开。重点阐述界面级 “一多” 的解决方法，即通过自适应布局和响应式布局来适配不同屏幕尺寸。自适应布局涵盖拉伸、均分等多种方式，通过特定的核心属性或组件实现；响应式布局包含断点系统、媒体查询和栅格布局，并针对不同场景推荐了相应的优势方案，为开发者解决界面适配难题提供了全面指导。
鸿蒙5.0实战开发之一多分栏开发实践
mn_xiaona666的博客
04-03 663
目前智能终端设备的种类繁多，不同类型的设备屏幕大小、用户使用习惯也存在不同，这给UI布局以及功能适配带来了很多挑战。手机仅支持单栏显示折叠屏可以支持单双栏显示平板支持三栏显示本文提供了一种“通过判断屏幕尺寸，选择合适的分栏布局”的方法，解决HarmonyOS的1+8多种形态设备的UI适配问题。通过该方法，开发者无需关注设备类型，即可达到多设备的自适应分栏布局效果，实现“一次开发，多端部署”。
鸿蒙5.0实战开发之Web适配一多开发实践
mn_xiaona666的博客
04-07 590
本文主要介绍Web侧如何进行多设备适配，结合Web组件实现在不同设备上的定制体验。内容涵盖Web侧提供的多设备适配能力，如相对单位、媒体查询、监听窗口变化事件，并针对前端布局中常见的宫格布局、自定义弹窗、轮播布局介绍一多适配的实现思路与方案。弹窗在用户交互中比较常见，在大尺寸设备上有更大的弹窗展示，可以避免弹窗内容过小，不易看清。实现上需要通过CSS的媒体查询@media能力，设置不同断点下的弹窗尺寸。如希望实现以下效果。在sm断点下，设置弹窗尺寸为328px*344px。
鸿蒙5.0实战开发之一多分级导航栏开发实践
mn_xiaona666的博客
04-07 619
PC/2in1设备上的商务办公、实用工具垂类应用开发中，常使用侧边分级导航展示多级目录。而在一多开发时，侧边分级导航并不一定适用于手机、平板等设备，若需要实现导航栏内的分级效果，比较复杂。本文提供分级导航栏的多端适配方案及指导，解决上述问题。通常，开发者可以结合 断点 能力，在不同断点下呈现相应布局。考虑不同屏幕尺寸的布局美观性及规范性，采用以下布局方式：断点为sm、md时，一级导航栏位于底部，二级页签栏位于顶部；断点为lg时，一级导航栏位于左侧，二级页签位于顶部；断点为xl时，在侧边栏中展示分级导航。
鸿蒙5.0实战案例：横竖屏切换开发实践
Maniu_666的博客
02-20 942
在旋转过程绘制中，由于生成文字缓存非常耗时图形所以会把文字转成图片，但是如果该页面上的文字使用了零宽字符，会导致每个字符被转成图片，会带来额外的绘制负载。具体的实现逻辑在windowUtil中，在调用屏幕旋转方向时，可以通过windowStage拿到对应的window实例，并设置旋转setPreferredOrientation。如果当前旋转页面存在一些图片，未经合理的裁剪，图片过大，可以对图片设置AutoResize属性，使图片裁剪到合适的大小进行绘制。在组件上使用计算后的高度和宽度。
鸿蒙5.0实战开发之一多断点开发实践
mn_xiaona666的博客
04-03 899
断点名称窗口宽度（vp）xs(0, 320）sm(320, 600)md(600, 840)lgxl(1440, +∞)断点名称高宽比sm(0, 0.8)md(0.8, 1.2)lg(1.2, +∞)说明一多的断点面向窗口而非面向设备类型，处于相同断点区间的窗口本质上形态相同，推荐展示相同的页面布局。因此同一设备上的不同窗口形态（例如全屏显示、分屏显示、自由窗口等），可能会落入不同的断点区间，展示不同断点对应的页面布局。
【鸿蒙 5.0 实战开发】鸿蒙（设备场景适配）——折叠屏体验设计实践
xiaolizibie的博客
03-28 645
折叠屏形态展开态：折叠屏设备完全展开后的形态。有更大的屏幕尺寸，可充分显示应用内容。折叠态：折叠屏设备折叠后的形态。折叠后屏幕尺寸变小。悬停态：折叠屏设备处于完全展开和折叠的中间状态，可平稳放置。体验设计点折叠屏相对于普通手机有两个明显的特点：可随时折叠展开、展开后屏幕变大。折叠态或悬停态下，屏幕被划分为2个显示区域，一个主要显示屏幕，一个次要显示屏幕。为了能够充分利用折叠屏的特点，提供良好的使用体验，折叠屏UX设计中需考虑如下体验诉求：体验连续。
鸿蒙5.0实战开发之折叠屏悬停态开发实践
mn_xiaona666的博客
04-03 642
折叠屏上提供独特的手持操作体验“悬停态”，即用户可以将产品半折后立在桌面上，实现免手持的体验。悬停态场景适用于不需要频繁进行交互的任务，例如视频通话、播放视频、拍照、听歌等。折叠屏进入悬停态时，中间弯折的区域难以操作且显示内容会变形，因此建议页面内容进行折痕区避让适配。本文提供折叠屏悬停态的三种实现方式，并根据其特点给出各自的适用场景。使用FolderStack组件实现悬停态，适用于视频全屏播放等交互少的场景。
鸿蒙实战开发5.0版：小型系统图形框架集成
qazwsx957486的博客
09-23 1307
主要包括设置屏幕大小，对接基础图元绘制，获取图形绘制的 buffer，把图形绘制的数据刷到屏幕上显示等。
HarmonyOS NEXT开发实战（5.0版）折叠屏实现折叠态切换适配扫描二维码实践
aasad66666的博客
09-29 578
实现折叠态切换适配
【HarmonyOS实战开发】智慧多窗应用适配指南
HarmonyOS007的博客
08-16 1497
智慧多窗是一种多任务处理解决方案，它允许用户在同一时间、同一屏幕上以悬浮窗或分屏的方式同时运行多个应用窗口。在智慧多窗的显示模式下，用户可以根据自己的需求，合理安排应用窗口的位置和大小。
【鸿蒙实战开发】团结引擎适配HarmonyOS NEXT
HarmonyOS_666的博客
07-26 4146
1.目前游戏侧的变动只需将新导出项目中的如下文件替换到现有鸿蒙工程中就行。2.游戏侧与端侧通信主要依靠OpenHarmonyJSClass、OpenHarmonyJSObject、OpenHarmonyJSCallback等类实现。具体可参考团结引擎官方文档：Developing for OpenHarmony。
HarmonyOS-ArkUI 一镜到底之页面间共享元素转场 sharedTransition
童年纸飞机的博客
04-24 650
文章中了解了什么是一镜到底，以及在一个大组件内，子组件与子组件进行一镜到底的转场的代码实现。但是截止到目前，我们讲的仍是一个页面内的一镜到底。事实上也可以进行一镜到底的实现，但是采用的是另外一个api：。具体能实现的效果，我找了个能激发大家学习兴趣的例子: 华为 音乐App的界面。看看这种炫酷的效果：反正好好写是可以用本文中学习的内容做到的。这个界面太复杂，代码案例中肯定不会实现这个。好，接下来我们学习相关API吧。
全平台开源即时通讯IM框架MobileIMSDK：7端+TCP/UDP/WebSocket协议，鸿蒙NEXT端已发布，5.7K Stars
hellojackjiang2011的博客
04-29 840
全平台开源即时通讯IM框架MobileIMSDK：7端+TCP/UDP/WebSocket协议，鸿蒙NEXT端已发布，5.7K Stars
BeeWorks企业内部即时通讯软件支持国产化，已在鸿蒙系统上稳定运行
weixin_53855915的博客
04-28 366
近年来，国家信息安全战略的推进对国产化替代提出了明确要求。根据“国资委内部文件”，到2027年央国企需100%完成信创国产替代，而“国机采〔2024〕7号文件”进一步细化了采购标准，要求党政机关优先选择符合安全可靠测评要求的国产CPU和操作系统，如飞腾、鲲鹏、麒麟、统信UOS等。BeeWorks基于多维产品能力矩阵，结合全面的协同产品能力、开放融合能力和全方位的安全保障能力，形成了面向政府、金融、航空、军工、能源、制造、教育、医疗等多行业的解决方案‌，还提供了更前沿的技术支持和全面的国产化适配能力。
鸿蒙NEXT开发组件截图和窗口截图工具类SnapshotUtil（ArkTs）
鸿蒙布道师
04-28 4543
鸿蒙NEXT开发组件截图和窗口截图工具类SnapshotUtil（ArkTs）
HarmonyOS应用开发中实现本地化存储的几种方式
最新发布
qq_58023907的博客
05-01 785
创建一个继承自。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值