文档管理中心

平板开启强制横屏选择分栏视图,应用横屏后分栏显示异常

问题现象

平板开启强制横屏选择分栏视图,应用内页面分栏显示异常。

背景知识

  • 系统针对平板设备提供了应用兼容性调试功能,能够调试应用横屏适配问题。
  • Navigation的mode属性可用来设置导航栏的显示模式,支持单栏(Stack)、分栏(Split)和自适应(Auto)。
  • splitPlaceholder:Navigation双栏模式下,支持设置右侧页面显示默认占位页,占位页仅作为UI展示页,不可获焦和响应事件,该属性从API version 20开始支持。

问题定位

使用UIView查看页面组件布局,发现当前页面未采用Navigation组件实现路由控制。

分析结论

HarmonyOS系统分栏功能为Navigation组件的特性,该应用此处页面未采用Navigation组件做路由控制,故也未适配分栏模式,当使用系统强制横屏功能,打开分栏模式会导致页面显示异常。

修改建议

应用代码中采用Navigation组件做路由控制,实现页面间跳转,并根据业务需要合理设置Navigation组件的mode属性,如果需要分栏,该属性参数就配置成NavigationMode.Split,代码样例如下所示。

收起
自动换行
深色代码主题
复制
  1. import { ComponentContent } from '@kit.ArkUI';
  2. @Builder
  3. function PlaceholderPage() {
  4. Column() {
  5. Text("分栏模式占位页")
  6. .fontSize(22)
  7. .fontWeight(500)
  8. .margin({ top: 200 });
  9. }.width("100%")
  10. .height("100%");
  11. }
  12. @Entry
  13. @Component
  14. struct NavigationExampleDemo {
  15. private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  16. placeholder = new ComponentContent(this.getUIContext(), wrapBuilder(PlaceholderPage));
  17. @Builder
  18. NavigationTitle() {
  19. Column() {
  20. Text('Title')
  21. .fontColor('#182431')
  22. .fontSize(20)
  23. .lineHeight(30)
  24. .fontWeight(500);
  25. Text('subtitle')
  26. .fontColor('#182431')
  27. .fontSize(14)
  28. .lineHeight(19)
  29. .opacity(0.4)
  30. .margin({ top: 2, bottom: 20 });
  31. }.alignItems(HorizontalAlign.Start);
  32. }
  33. build() {
  34. Column() {
  35. Navigation() {
  36. TextInput({ placeholder: 'search...' })
  37. .width('90%')
  38. .height(40)
  39. .backgroundColor('#F1F3F5')
  40. .margin({ top: 8 });
  41. List({ space: 12, initialIndex: 0 }) {
  42. ForEach(this.arr, (item: number) => {
  43. ListItem() {
  44. Text('' + item)
  45. .width('90%')
  46. .height(72)
  47. .backgroundColor('#F1F3F5')
  48. .borderRadius(24)
  49. .fontSize(16)
  50. .fontWeight(500)
  51. .textAlign(TextAlign.Center);
  52. };
  53. }, (item: number) => item.toString());
  54. }
  55. .height(324)
  56. .width('100%')
  57. .margin({ top: 12, left: '10%' });
  58. }
  59. .title(this.NavigationTitle)
  60. .titleMode(NavigationTitleMode.Full)
  61. .toolbarConfiguration([
  62. {
  63. // $r("app.media.startIcon")需要替换为开发者所需的图像资源文件
  64. value: '首页',
  65. icon: $r("app.media.startIcon")
  66. },
  67. {
  68. value: '菜单',
  69. icon: $r("app.media.startIcon")
  70. },
  71. {
  72. value: '我的',
  73. icon: $r("app.media.startIcon")
  74. }
  75. ], { backgroundColor: '#FFFFFF' })
  76. .mode(NavigationMode.Split)
  77. .hideTitleBar(false)
  78. .hideToolBar(false)
  79. .splitPlaceholder(this.placeholder);
  80. }.width('100%').height('100%');
  81. }
  82. }