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

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

HarmonyOS
2024-12-18 16:14:19
浏览
收藏 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
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.

然后在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.');
});
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
分享
微博
QQ
微信
回复
2024-12-18 18:42:50


相关问题
HarmonyOS 横竖切换
633浏览 • 1回复 待解决
HarmonyOS 横竖切换问题
712浏览 • 1回复 待解决
HarmonyOS 小窗下如何实现横竖切换
526浏览 • 1回复 待解决
HarmonyOS 监听横竖切换
533浏览 • 1回复 待解决
如何实现page页面的横竖切换
1007浏览 • 1回复 待解决
HarmonyOS 平板无法正确横竖切换
516浏览 • 1回复 待解决
页面横竖如何进行切换
896浏览 • 1回复 待解决
如何进行页面横竖切换
2439浏览 • 1回复 待解决
求大佬告知如何切换横竖
2688浏览 • 1回复 待解决
如何监听设备横竖切换状态呢
2132浏览 • 1回复 待解决
如何监听手机屏幕的横竖切换
867浏览 • 1回复 待解决
鸿蒙横竖切换监听,需要这个功能
11801浏览 • 3回复 已解决
鸿蒙JS 框架中如何主动切换横竖?
5222浏览 • 1回复 待解决
Open Harmony 3.1版本支持横竖切换吗?
5422浏览 • 1回复 待解决