HarmonyOS 鸿蒙Next Tab组件显示异常问题

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Tab组件显示异常问题 api9,stage模型,页面共有3个tab页签,在竖屏状态下页签之间点击可以正常切换没有问题一切正常,但是当停留在页签3时,从竖屏切换成横屏之后,页签自动跳转到页签2,这是什么问题呢?我想要的是横竖屏切换依然保持切换前选中的页签内容。我在打开这个页面设置默认显示的是页签2的内容(即设置默认页签索引为1),是否和这个有关系?在手机端真机和模拟器都有个问题,但是在平板设备上又是正常的

PixPin_2024-10-14_14-59-50.png

PixPin_2024-10-14_15-03-10.png

部分代码:

build() {

  Tabs({ barPosition: BarPosition.End, index: CommonConstants.CONSOLE_TAB_INDEX, controller: this.tabsController }) {
    // GIS地图Tab
    TabContent() {
      GisPage()
    }
    .tabBar(this.TabBuilder(CommonConstants.GIS_TITLE, CommonConstants.GIS_TAB_INDEX, $r('app.media.map_selected'), $r('app.media.map_normal')))

    // 主控台Tab
    TabContent() {
      Console()
    }
    .tabBar(this.TabBuilder(CommonConstants.CONSOLE_TITLE, CommonConstants.CONSOLE_TAB_INDEX, $r('app.media.console_selected'), $r('app.media.console_normal')))

    // 系统设置Tab
    TabContent() {
      Setting()
    }
    .tabBar(this.TabBuilder(CommonConstants.SETTING_TITLE, CommonConstants.SETTING_TAB_INDEX, $r('app.media.setting_selected'), $r('app.media.setting_normal')))
  }
  .width(CommonConstants.FULL_PARENT)
  .barHeight(this.currentBreakpoint === 'sm' || this.currentBreakpoint === 'md' ? 50 : 90)
  .width('100%')
  .height('100%')
  .backgroundColor('#e6e6e6')
  .onChange((index: number) => {
    this.currentIndex = index
  })

}

/**
 * 自定义导航栏
 * @param title 页签文字title
 * @param index 页签对应位置index
 * @param selectedImg 选中状态的图片资源
 * @param normalImg 未选中状态的图片资源
 */
@Builder
TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === index ? selectedImg : normalImg)
      .width(this.currentBreakpoint === 'sm' || this.currentBreakpoint === 'md' ? 24 : 32)
      .height(this.currentBreakpoint === 'sm' || this.currentBreakpoint === 'md' ? 24 : 32)
    Text(title)
      .margin({ top: 2 })
      .fontSize(this.currentBreakpoint === 'sm' || this.currentBreakpoint === 'md' ? 12 : 16)
      .fontColor(this.currentIndex === index ? $r('app.color.tab_selected') : $r('app.color.tab_normal'))
  }
  .justifyContent(FlexAlign.Center)
  .height('100%')
  .width('100%')
  .backgroundColor(0x222222)
  .onClick(() => {
    // this.currentIndex = index;
    this.tabsController.changeIndex(index);
    if (this.currentIndex == 0) {
      router.replaceUrl({
        url: 'pages/gis/GisPage', // 目标url
        params: {}
      }, router.RouterMode.Standard, (err) => {
        if (err) {
          console.error(`## 跳转GIS地图失败, code is ${err.code}, message is ${err.message}`);
          return;
        }
      })
    }
  })
}

更多关于HarmonyOS 鸿蒙Next Tab组件显示异常问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

Tabs({ barPosition: BarPosition.End, index: CommonConstants.CONSOLE_TAB_INDEX, controller: this.tabsController })

是因为这边设置了默认值为第二个tab页,竖屏切换到横屏的时候,展示了默认值

更多关于HarmonyOS 鸿蒙Next Tab组件显示异常问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


搞定了,那里该用状态变量的,

在HarmonyOS鸿蒙Next中,Tab组件显示异常可能涉及多个方面。首先,检查布局文件是否正确配置了Tab组件的属性,如TabContentTabBar的绑定关系。其次,确保在代码中正确初始化了Tab组件,并且数据源与UI组件同步。如果使用了自定义样式或动画,需确认这些资源文件没有错误或缺失。此外,查看是否有其他组件或逻辑影响了Tab的显示,例如重叠的视图或错误的布局约束。最后,确认使用的鸿蒙SDK版本是否与开发环境兼容,避免因版本不匹配导致的显示问题。

鸿蒙Next Tab组件显示异常可能由以下原因导致:

  1. 布局问题:检查布局文件,确保Tab组件及其子组件的尺寸和位置设置正确。
  2. 资源文件错误:确认资源文件(如字符串、颜色、图标)未缺失或引用错误。
  3. 代码逻辑问题:检查Tab组件的初始化、数据绑定和事件处理逻辑,确保无错误。
  4. 版本兼容性:确保使用的鸿蒙SDK版本与设备系统版本兼容。
  5. 样式冲突:检查是否有自定义样式与默认样式冲突,导致显示异常。

建议逐步排查以上问题,或提供具体代码片段以便进一步分析。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!