HarmonyOS鸿蒙Next中TextPicker显隐显示异常

HarmonyOS鸿蒙Next中TextPicker显隐显示异常 开发过程发现TextPicker组件在隐藏再显示后字体颜色会变浅

demo 代码：

@State isShow: boolean = false;
build() {
  Column() {
    Button('button')
      .type(ButtonType.Capsule)
      .onClick(() => {
        this.isShow = !this.isShow
      })

    TextPicker({
      range: ["a", "b", "c"]
    })
      .visibility(this.isShow ? Visibility.Visible : Visibility.Hidden)
  }
}

更多关于HarmonyOS鸿蒙Next中TextPicker显隐显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

HarmonyOS 5.0.5（17） Beta1还有这个问题，等待系统修复吧

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


if (this.isShow) { TextPicker({ range: [“a”, “b”, “c”] }) }

在HarmonyOS鸿蒙Next中，TextPicker显隐显示异常可能是由于布局更新不及时或状态管理不当导致的。确保在显隐操作后调用invalidate()或requestLayout()方法强制刷新UI。检查visibility属性的设置是否正确，避免在异步操作中未及时更新UI状态。此外，确认TextPicker的父容器布局是否支持动态显隐变化。

这是一个已知的TextPicker组件在显隐切换时的渲染问题。当TextPicker从Hidden状态切换回Visible时，组件内部的状态恢复机制会导致字体颜色变浅。

临时解决方案可以尝试以下两种方式：

  1. 使用条件渲染替代visibility控制：
build() {
  Column() {
    Button('button')
      .onClick(() => { this.isShow = !this.isShow })

    if (this.isShow) {
      TextPicker({ range: ["a", "b", "c"] })
    }
  }
}
  1. 强制刷新TextPicker组件：
.onClick(() => {
  this.isShow = !this.isShow
  // 强制触发重新渲染
  this.controller = new TextPickerController()
})

这个问题预计会在后续的HarmonyOS版本更新中修复。

回到顶部