HarmonyOS鸿蒙Next中求助app平板端宽度异常

【背景知识】 一多开发的布局一般有两种方式，自适应布局和响应式布局。

• 自适应布局： 当外部容器大小发生变化时，元素可以根据相对关系自动变化以适应外部容器变化的布局能力。相对关系如占比、固定宽高比、显示优先级等。当前自适应布局能力有7种：拉伸能力、均分能力、占比能力、缩放能力、延伸能力、隐藏能力、折行能力。自适应布局能力可以实现界面显示随外部容器大小连续变化。
• 响应式布局： 当外部容器大小发生变化时，元素可以根据断点、栅格或特定的特征（如屏幕方向、窗口宽高等）自动变化以适应外部容器变化的布局能力。当前响应式布局能力有3种：断点、媒体查询、栅格布局。响应式布局可以实现界面随外部容器大小有不连续变化，通常不同特征下的界面显示会有较大的差异。

Navigation：Navigation组件是路由导航的根视图容器，一般作为Page页面的根容器使用，其内部默认包含了标题栏、内容区和工具栏，其中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由进行切换。 mode：Navigation组件的分栏模式由mode属性控制，包括单栏（Stack）、分栏（Split）和自适应（Auto）三个属性。该属性默认为Auto模式，在该模式下会自动监听屏幕属性，当为折叠屏或平板时，默认分栏显示，在折叠状态或普通手机时可为单栏显示。 splitPlaceholder：Navigation双栏模式下，支持设置右侧页面显示默认占位页，占位页仅作为UI展示页，不可获焦和响应事件。

【解决方案】

1. 针对首页广告图片展示可以参考一多开发，对平板和手机分别进行图片适配：

   • 针对每种场景的布局可以参考典型布局场景。
   • 根据不同的行业可以参考不同的一多开发实例。例如券商行业可以参考一多适配案例中的股票类demo或银行类demo。

2. 针对app在平板右侧为空白，可以看下是否使用Navigation的mode属性默认为Auto，当窗口宽度>=600vp时，采用Split模式显示。

如果不需要分栏，可以把mode属性设为Stack再根据上述一多方案进行适配，如果需要分栏展示可以参考：

• 方案1：API20之前，将默认页面加入页面栈进行默认显示，并设置默认页面的展示内容，以下以展示一个文本为例：

// router_map.json中配置右侧推送页面的路由表
{
  "routerMap": [
    {
      "name": "DefaultPage",
      "pageSourceFile": "src/main/ets/pages/Index.ets",
      "buildFunction": "DefaultPageBuilder"
    }
  ]
}

// 推送页面的构造函数
@Builder
export function DefaultPageBuilder() {
  DefaultPage()
}

// 右侧推送的默认页面
@Component
export struct DefaultPage {
  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Column() {
        Text("DefaultPage")
      }
      .width('100%')
      .height('100%')
    }
    .title("DefaultPage")
    .onBackPressed(() => {
      // 返回true表示自定义返回，能避免返回空白页面。返回false则表示系统默认返回，会返回空白页面。
      return true;
    })
  }
}

// Navigation主页
@Entry
@Component
struct Index {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();

  aboutToAppear(): void {
    this.pageInfos.pushPath({ name: "DefaultPage" });
  }

  build() {
    Navigation(this.pageInfos) {
      // ...
    }
    .mode(NavigationMode.Split)
  }
}

• 方案2：API20新增splitPlaceholder接口，可以使用splitPlaceholder设置右侧页面显示默认占位页。

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

@Builder function PlaceholderPage() {
  Column() {
    Text("分栏模式占位页")
      .fontSize(28)
      .fontWeight(700)
      .margin({ top: 200 })
  }.width("100%")
  .height("100%")
}

@Entry
@Component
struct NavigationExample {
  placeholder = new ComponentContent(this.getUIContext(), wrapBuilder(PlaceholderPage))

  build() {
    Column() {
      Navigation() {
        // ...
      }
      .splitPlaceholder(this.placeholder)
    }.width('100%').height('100%')
  }
}