HarmonyOS 鸿蒙Next 在自定义组件中获取本组件中元素宽高时 貌似获取到的页面对象有误

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

HarmonyOS 鸿蒙Next 在自定义组件中获取本组件中元素宽高时 貌似获取到的页面对象有误

自定义了一个叫 TabSet 的组件 在组件中需要渲染一些选项 我需要一进入组件就获取渲染的第一个选项的宽度 这个组件分别在三个页面中引入了 在第一和第二个页面中 获取到的宽度是对的 到第三个页面获取的宽度就不对了 返回的是第二个页面渲染的选项的宽度 手头没真机 不知道这是不是又是模拟器的问题 （根页面是用tabs组件搭建的 引入了5个组件当作页面 然后在这5个组件其中三个 引入的自定义组件 不知道和tabs组件有没有关系）

2.gif


更多关于HarmonyOS 鸿蒙Next 在自定义组件中获取本组件中元素宽高时 貌似获取到的页面对象有误的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
7 回复 
Text(tab.name.toString())
                  .padding({left: 10, right: 10})
                  .fontSize(15).fontColor('#606266')
                  .lineHeight(37)
                  .height(37)
                  .id('t' + i.toString())

TabSet里面这个Text的id，在多个Tab页都用TabSet生成时会重复，可能会导致这个问题，可以把这个id的生成算法修改下

更多关于HarmonyOS 鸿蒙Next 在自定义组件中获取本组件中元素宽高时 貌似获取到的页面对象有误的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


试了下 是这个问题 谢谢啦

//index.ets
import Home from './Home'
import Contest from './Contest'
import DataCenter from './DataCenter'
import Shop from './Shop'
import Mine from './Mine'

let tabBarOptions = []

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

  @Builder
  getComponent(name: string) {
    if (name == 'Mine') {
      Mine()
    } else if (name == 'Contest') {
      Contest()
    } else if (name == 'DataCenter') {
      DataCenter()
    } else if (name == 'Shop') {
      Shop()
    } else {
      Home()
    }
  }

  @Builder
  tabBuilder(optionItem: Record<string, string>, i: number | undefined) {
    Column() {
      Image(this.currentIndex == i ? $rawfile(optionItem.iconSelect) : $rawfile(optionItem.icon))
        .width(24)
        .height(24)
        .margin({ bottom: 2 })
        .objectFit(ImageFit.Contain)
      Text(optionItem.text)
        .fontSize(11)
        .lineHeight(14)
    }
    .width('100%')
    .height('100%')
    .padding({
      top: 8
    })
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {
        Repeat<Record<string, string>>(tabBarOptions).each((obj: RepeatItem<Record<string, string>>) => {
          TabContent() {
            this.getComponent(obj.item.component)
          }
          .tabBar(this.tabBuilder(obj.item, obj.index))
          .padding({
            top: (obj.item.component == 'DataCenter' || obj.item.component == 'Mine') ? 0 : px2vp(this.topRectHeight)
          })
        })
      }
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
    .width('100%')
  }
}
具体代码能贴一下吗？

我在下面贴个大体的代码结构吧

收到，先分析下

在HarmonyOS鸿蒙Next的开发环境中，如果你在自定义组件中尝试获取本组件内元素的宽高时遇到了页面对象有误的问题，这通常是由于组件的生命周期管理或者视图树构建时序导致的。

首先，确保你是在组件的onAttachedToWindow或者之后的生命周期方法中尝试获取宽高，因为在此之前视图可能还没有完全渲染完成。其次，检查你是否正确引用了本组件内的元素，避免使用错误的引用或者全局引用导致获取到错误的页面对象。

此外，由于鸿蒙系统对UI渲染和组件生命周期的管理有特定的机制，如果直接获取宽高失败，你可以考虑使用Component.postDelayed方法延迟一段时间再获取，或者通过监听组件的布局变化（如onLayout回调）来获取准确的宽高信息。

如果以上方法均无法解决问题，可能是因为鸿蒙系统在某些特定版本或特定情况下存在已知的bug。此时，你可以考虑查阅最新的鸿蒙开发者文档或者社区讨论，看是否有其他开发者遇到并解决了类似的问题。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部