HarmonyOS 鸿蒙Next 单独某个页面实现横屏效果

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 单独某个页面实现横屏效果

单独某个页面实现横屏效果

3 回复

参考demo:

1、首先打开entry下面的module.json5文件,在abilities节点下添加一个orientation的属性:

“orientation”: ‘unspecified’

2、第一个页面:

import { router } from '@kit.ArkUI';

@Entry
@Component
struct aboutScreen1 {
  @State message: string = '';

  build() {
    Column() {
      Text('首页,点我跳转')
        .fontSize(30)
        .textAlign(TextAlign.Center)
        .width('100%')
        .fontWeight(500)
        .height('100%')
        .onClick(() => {
          router.pushUrl({ url: "pages/aboutScreen2" })
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .backgroundColor(Color.White)
    .height('100%')
  }
}

3、第二个页面:

import { router, window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct aboutScreen2 {
  @State message: string = '';

  aboutToAppear(): void {
    let orientation = window.Orientation.LANDSCAPE
    this.setScreenOrientation(orientation)
  }

  aboutToDisappear(): void {
    let orientation = window.Orientation.PORTRAIT
    this.setScreenOrientation(orientation)
  }

  setScreenOrientation(orientation: window.Orientation) {
    let windowClass: window.Window | undefined = undefined;
    try {
      let promise = window.getLastWindow(getContext())
      promise.then((data) => {
        windowClass = data
        windowClass.setPreferredOrientation(orientation)
      }).catch((err: BusinessError) => {
        console.error('getLastWindow error')
      })
    } catch (e) {
      console.error('setScreenOrientation error')
    }
  }

  build() {
    Column() {
      Text('我横屏啦')
        .fontSize(30)
        .textAlign(TextAlign.Center)
        .width('100%')
        .fontWeight(500)
        .height('50%')
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .backgroundColor(Color.White)
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 单独某个页面实现横屏效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


进入页面开启横屏,退出页面关闭横屏。这样行不通吗?

在HarmonyOS 鸿蒙Next系统中,若要为单独某个页面实现横屏效果,可以通过配置页面的方向属性来实现。以下是实现步骤:

  1. 配置文件修改: 在目标页面的配置文件(通常是config.json)中,添加或修改abilities节点下的formConfigs属性,设置screenOrientationlandscape。例如:

    {
      "abilities": [
        {
          "name": "com.example.YourAbility",
          "label": "Your Page",
          "icon": "$media:icon",
          "formConfigs": [
            {
              "module": "default",
              "screenOrientation": "landscape"
            }
          ]
        }
      ]
    }
    
  2. 代码层面设置(可选): 虽然配置文件修改通常足以实现横屏效果,但在某些复杂场景下,也可以在页面的代码中动态设置屏幕方向。这通常通过调用系统API来实现,但具体实现依赖于鸿蒙API文档,此处不展开。

  3. 测试: 运行应用并导航到配置过的页面,确认页面已正确设置为横屏显示。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部