HarmonyOS 横竖屏切换实现过于繁琐

当前体验不好,需要在每个页面(Entry)的 onPageShow中写下转屏函数;

HarmonyOS
12h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

目前可以自定义一个工具类来统一管理所有页面的展示方式,参考下这个demo呢:

Index7gongju.ets

import Stack from '@ohos.util.Stack';
import { uiObserver, window } from '@kit.ArkUI';
import { common, UIAbility } from '@kit.AbilityKit';
class MyPage {
  id?: string
  name?: ResourceStr
  path?: string
  type?: string
  lifeCricle?: number
}
interface pageTracking {
  page: MyPage
  //onshown时刻
  starttime: number
  //停留时间
  statetime: number
}
//窗口做区分  string
let mypagestack: Record<string, Stack<pageTracking>> = {};
let windows: Record<string, window.Window> = {};
let pageOrientations: Record<string, window.Orientation> = {
  "Index": window.Orientation.UNSPECIFIED,
  "Logon": window.Orientation.PORTRAIT,
  "Detail": window.Orientation.LANDSCAPE,
  "Page2": window.Orientation.PORTRAIT_INVERTED,
  "Page3": window.Orientation.LANDSCAPE_INVERTED,
}
//要求mainWindow传参
//每个窗口的页面路径一定是一条链  不传默认主窗
export function observerAll(curWindow: window.Window, windowName ?: string) {
  //判断是否为空 mainWindow
  if (!windowName || windowName == 'mainWindow') {
    windowName = 'mainWindow'
  }
  let name = windowName as string
  windows[name] = curWindow;
  let myObserve = curWindow.getUIContext().getUIObserver();
  mypagestack[name] = new Stack<pageTracking>();
  // mypagestack.push <windowName, Stack<pageTracking>>
  //监听navDestination组件生命周期变化
  myObserve.on('navDestinationUpdate', (info) => {
    //映射成mypage
    let mypage = new MyPage
    mypage.id = info.navDestinationId
    mypage.name = info.name
    mypage.path = info.param?.toString()
    mypage.type = 'NavDestination'
    mypage.lifeCricle = info.state
    //
    tracking(mypage, name)
  })
  //监听page生命周期变化
  myObserve.on('routerPageUpdate', (info) => {
    // enterPageLoaded = true;
    let mypage = new MyPage
    mypage.id = String(info.index)
    // router的name字段额外返回了path,去最后一个名称即可
    mypage.name = info.name.split('/').pop()
    mypage.path = info.path
    mypage.type = 'page'
    mypage.lifeCricle = navState(info.state)
    tracking(mypage, name)
  })
}

//使用mypage埋点  存生命周期信息
function tracking(mypage: MyPage, windowname: string) {
  let stack: Stack<pageTracking> = mypagestack[windowname]
  let pagetracking: pageTracking;
  // 1.存页面信息(abouttoappear),同时打印当前所有路径 打印当前栈的顺序
  // 如果当前栈元素为一个且当前元素为navd页面,仅修改对应页面的类型
  // 不入栈 ,而是将对应的栈顶元素的page类型改为navPage
  if (mypage.lifeCricle == 2) {
    let firstPage = stack.peek()
    if (stack.length == 1 && firstPage.page.type == 'NavDestination') {
      firstPage = stack.pop()
      firstPage.page.type = 'navPage'
      stack.push(firstPage)
    } else {
      stack.push({
        page: mypage,
        starttime: Date.now(),
        statetime: 0,
      })
      let pagesPath = windowname + ':'
      stack.forEach((pagetraking) => {
        pagesPath += '->' + pagetraking.page.name?.toString()
      })
      console.log(pagesPath)
    }
  }
  // 2.更新页面信息 :onshown(刷新开始时间)
  else if (mypage.lifeCricle == 0) {
    pagetracking = stack.pop();
    pagetracking.starttime = Date.now()
    stack.push(pagetracking)
    // 改变方向:
    let defaultOrientation = window.Orientation.PORTRAIT
    if (!!pageOrientations[mypage.name as string]) {
      defaultOrientation = pageOrientations[mypage.name as string];
    }
    windows[windowname].setPreferredOrientation(defaultOrientation)

  }
  // 3.更新页面信息 :onhidden(累计值 刷新停留时间)
  else if (mypage.lifeCricle == 1) {
    pagetracking = stack.pop();
    pagetracking.statetime = Date.now() - pagetracking.starttime
    stack.push(pagetracking)
  }
  // 4.输出页面信息 abouttodistoappear 删除页面信息
  else if (mypage.lifeCricle == 3) {
    let pagesPath = windowname + ':'
    //
    // let time=Date.now()-stack.pop().starttime
    // console.log('zyf'+)

    //展示当前页面展示时间

    // stack.forEach((pagetraking) => {
    //   // let time=Date.now()-pagetraking.starttime
    //   // console.log('zyf'+pagetraking.page.name?.toString() + time + 'ms');
    //   console.log('zyf'+pagetraking.page.name?.toString() + pagetraking.statetime + 'ms');
    // })
    let popPage = stack.pop()
    console.log(popPage.page.name?.toString() + ' statetime ' + popPage.statetime + 'ms')
    console.log('popPage :' + popPage.page.name)
    stack.forEach((pagetraking) => {
      pagesPath += '->' + pagetraking.page.name?.toString()
    })
    console.log(pagesPath);
  }
}

//NavDestination与page生命周期统一
function navState(state: number): number {
  if (state == 0) {
    return 2
  } else if (state == 1) {
    return 3
  } else if (state == 2) {
    return 0
  } else if (state == 3) {
    return 1
  } else if (state == 4) {
    return 100
  } else {
    return 4
  }
}

然后在Aililty中引用这个工具类,在onWindowStageCreate中调用,参考下面代码

import { observerAll } from '../pages/Index7gongju';
onWindowStageCreate(windowStage: window.WindowStage): void {

  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/Logon', (err) => {
  if (err.code) {
  hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
  return;
}
try {
  let mainWindow = windowStage.getMainWindowSync()
  observerAll(mainWindow)
} catch (error) {
  console.error(error, "    zzzzzz")
}

hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});
}
分享
微博
QQ
微信
回复
9h前
相关问题
如何实现page页面的横竖切换
526浏览 • 1回复 待解决
求大佬告知如何切换横竖
2045浏览 • 1回复 待解决
页面横竖如何进行切换
441浏览 • 1回复 待解决
如何进行页面横竖切换
1989浏览 • 1回复 待解决
如何监听手机屏幕的横竖切换
433浏览 • 1回复 待解决
鸿蒙横竖切换监听,需要这个功能
11368浏览 • 3回复 已解决
如何监听设备横竖切换状态呢
1691浏览 • 1回复 待解决
鸿蒙JS 框架中如何主动切换横竖?
4810浏览 • 1回复 待解决
如何让横竖切换更自然一些
603浏览 • 1回复 待解决
Open Harmony 3.1版本支持横竖切换吗?
5074浏览 • 1回复 待解决
横竖旋转demo有哪些?
843浏览 • 1回复 待解决
OpenHarmony 小型系统如何设置横竖
7954浏览 • 1回复 待解决