HarmonyOS NEXT 使用Navigation实现多设备适配案例

  // 点击瀑布流Item时，根据点击的模块信息，将页面放入路由栈
  DynamicsRouter.push(listData.routerInfo, listData.param);
})

}

#### FAQ


##### 1.页面间共享组件实例模块的适配问题


页面间共享组件实例模块中也写了`Navigation`组件，想要展示的效果是`Stack`模式，但是半屏的平板的宽度也大于600，被系统自动认为采用`Split`模式。  
 页面间共享组件实例模块中还绑定了半模态，并未设置`preferType`(半模态页面的样式)。设备宽度小于600vp时，默认显示底部弹窗样式。 设备宽度在600-840vp间时，默认显示居中弹窗样式。设备宽度大于840vp时，默认显示跟手弹窗样式，跟手弹窗显示在`bindSheet`绑定的节点下方。平板宽度大于840vp，跟手弹窗显示在节点下方导致弹窗不可见。 所以通过设备宽度来设置`preferType`的样式。  
 源码参考:  
[ComponentSharedInPages.ets]( )  
[TakeTaxiDetailPage.ets]( )

//ComponentSharedInPages.ets
build() {
Stack({alignContent: Alignment.Bottom}) {
…
// 应用主页用NavDestination承载，Navigation为空页面直接跳转到MainPage主页面
Navigation(this.pageStackForComponentSharedPages) {
}
…
.mode(NavigationMode.Stack)
}
…
}

//TakeTaxiDetailPage.ets
…
@State windowWidth: number = 0;
readonly componentsWindowWidth: number = 600;
…
/**

• 获取应用主窗口的宽高
  */
  aboutToAppear() {
  window.getLastWindow(getContext(this), (err: BusinessError, data: window.Window) => {
  let rect: window.Rect = data.getWindowProperties().windowRect;
  this.windowWidth = px2vp(rect.width);
  })
  }
  …
  build() {
  NavDestination() {
  …
  // 绑定上半模态页面，用于显示内容
  .bindSheet($$this.isShow, this.taxiContentBuilder(),
  {
  detents: TakeTaxiPageCommonConstants.SHEET_DETENTS,
  preferType: this.windowWidth > this.componentsWindowWidth ? SheetType.CENTER : SheetType.POPUP,
  …
  }
  )
  }
  …
  }

##### 2.底部抽屉滑动效果模块的适配问题


底部抽屉滑动效果模块中写了一个`Image`组件，其资源是一个很大的地图图片，在分栏效果展示时`Image`图片资源会拦截`Navigation`导航栏的点击或者拖拽事件，可以采用`Column`的`clip`属性将超出`Image`的图片裁掉。  
 源码参考:[Component.ets]( )。

build() {
Column() {
// 背景地图图片
Image($r{(}^{\prime }app.media.ma{p}^{\prime })).id("b{g}_{i}mg").height($r(‘app.integer.number_2000’))
.width($r(‘app.integer.number_2000’))
.translate({ x: this.offsetX, y: this.offsetY })// 以组件左上角为坐标原点进行移动
.draggable(false) // 单指操作拖动背景地图
}.width(‘100%’)
.height(‘100%’)
.clip(true) // 地图图片超出页面区域时裁剪掉
…
}

##### 3.适配挖孔屏模块的适配问题


适配挖孔屏模块`Image`组件采用`ImageFit.Cover`填充图片，导致图片显示不完整，采用`ImageFit.Fill`，虽然图片变扁了，但是能完整显示，不影响具体功能。  
 源码参考:[DiggingHoleScreen.ets]( )。

Image($r(‘app.media.2048game’))
.objectFit(ImageFit.Fill)
.width(‘100%’)
.height(‘100%’)

##### 4.左右拖动切换图片模块的适配问题


左右拖动切换图片模块主要功能要实时记录手势拖动的距离，以此来进行计算，所以宽度和高度要写固定数值，不能使用百分比。但是折叠屏手机折叠后会出现超出屏幕的情况，可采用缩小组件宽度的方式适配。  
 源码参考:  
[DragToSwitchPicturesView.ets]( )  
[Constants.ets]( )  
[integer.json]( )

// DragToSwitchPicturesView.ets
@State dragRefOffset: number = 0; // 用来记录每次图标拖动的距离
@State imageWidth: number = 160; // 用来记录每次图标拖动完成后左侧Image的width宽度
@State leftImageWidth: number = 160; // 用来记录每次图标拖动时左侧Image的实时width宽度
@State rightImageWidth: number = 160; // 用来记录每次图标拖动时右侧Image的实时width宽度
…
PanGesture({ fingers: CONFIGURATION.PANGESTURE_FINGERS, distance: CONFIGURATION.PANGESTURE_DISTANCE })
.onActionStart(() => {
this.dragRefOffset = CONFIGURATION.INIT_VALUE; // 每次拖动开始时将图标拖动的距离初始化。
})
// TODO: 性能知识点: 该函数是系统高频回调函数，避免在函数中进行冗余或耗时操作，例如应该减少或避免在函数打印日志，会有较大的性能损耗。
.onActionUpdate((event: GestureEvent) => {
// 通过监听GestureEvent事件，实时监听图标拖动距离
this.dragRefOffset = event.offsetX;
this.leftImageWidth = this.imageWidth + this.dragRefOffset;
this.rightImageWidth = CONFIGURATION.IMAGE_FULL_SIZE - this.leftImageWidth;
if (this.leftImageWidth >= CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE) { // 当leftImageWidth大于等于310vp时，设置左右Image为固定值，实现停止滑动效果。
this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE;
this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_RIGHT_LIMIT_SIZE;
} else if (this.leftImageWidth <= CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE) { // 当leftImageWidth小于等于30vp时，设置左右Image为固定值，实现停止滑动效果。
this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE;
this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_LEFT_LIMIT_SIZE;
}
})
.onActionEnd((event: GestureEvent) => {
if (this.leftImageWidth <= CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE) {
this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE;
this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_LEFT_LIMIT_SIZE;
this.imageWidth = CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE;
} else if (this.leftImageWidth >= CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE) {
this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE;
this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_RIGHT_LIMIT_SIZE;
this.imageWidth = CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE;
} else {
this.leftImageWidth = this.imageWidth + this.dragRefOffset; // 滑动结束时leftImageWidth等于左边原有Width&