HarmonyOS 鸿蒙Next TextPicker只能显示3行是什么原因??

HarmonyOS 鸿蒙Next TextPicker只能显示3行是什么原因?? TextPicker只能显示3行是什么原因??文档上面默认都是显示5行的,为什么我只显示3行?

我尝试修改gradientHeight 和 defaultPickerItemHeight和字体的大小都没有用。

我打开布局边界之后观察,控件的高度已经顶到父容器了。我的TextPicker是在自定义Dialog里。

111.png

22.png

9 回复

方便给个能复现问题的最小demo吗,包括颜色资源。

我用你的大概的样式写出来,能正常显示5个可见选项,我有点怀疑是不是颜色的问题。

下面是我的写法,没啥问题,把你的能复现的最小demo发出来一起分析下

@Entry
@Component
struct Index {
  items: SinglePickerItem[] = []

  aboutToAppear(): void {
    for (let i = 0; i < 100; i++) {
      this.items.push(new SinglePickerItem(`${(i + 1)}`, i))
    }
  }

  build() {
    Column() {
      RelativeContainer() {
        Text("title")
          .width('100%')
          .height(42)
          .textAlign(TextAlign.Center)
          .fontSize(18)
          .fontColor(Color.Red)
          .fontWeight(FontWeight.Bold)
          .backgroundColor(Color.Black)
          .borderRadius({
            topLeft: 14,
            topRight: 14,
            bottomLeft: 0,
            bottomRight: 0
          })
        TextPicker({ range: this.items })
          .onChange((value: string | string[], index: number | number[]) => {
            console.error('Picker item changed, value: ' + value + ', index: ' + index)
          })
          .width('100%')
          .height('100%')
          .divider({ color: Color.Red })
          .disappearTextStyle({ color: Color.Red, font: { size: 20, weight: FontWeight.Normal } })
          .textStyle({ color: Color.Red, font: { size: 20, weight: FontWeight.Normal } })
          .selectedTextStyle({ color: Color.Red, font: { size: 30, weight: FontWeight.Bolder } })
          .gradientHeight('200%')
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            middle: { anchor: '__container__', align: HorizontalAlign.Center }
          })

        Text('um')
          .width('auto')
          .height('auto')
          .textAlign(TextAlign.Center)
          .fontSize(20)
          .fontColor(Color.Red)
          .fontWeight(FontWeight.Bold)
          .alignRules({
            center: { anchor: '__container__', align: VerticalAlign.Center },
            right: { anchor: '__container__', align: HorizontalAlign.End }
          })
      }.width('100%')
      .layoutWeight(1)
      .padding({ left: 20, right: 20 })
      .borderRadius({
        topLeft: 0,
        topRight: 0,
        bottomLeft: 14,
        bottomRight: 14
      })
    }.height(280)
    .alignItems(HorizontalAlign.Center)
  }
}

class SinglePickerItem {
  text: ResourceStr
  value: number

  constructor(text: ResourceStr, value: number) {
    this.text = text
    this.value = value
  }
}

更多关于HarmonyOS 鸿蒙Next TextPicker只能显示3行是什么原因??的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


不是颜色资源的问题。竖屏是正常显示5行,是横屏的状态下只显示3行。

好的,我也复现了,我再去找人问问,

我提工单问了,官方说目前的版本是这样的。

看官方文档可以显示5行,你看看是不是高度问题或者字体太大了

不是,高度和文字大小我都调过,

HarmonyOS的社区里有很多技术大牛分享经验,学到了很多有用的知识。

竖屏正常显示5行,横屏的状态下只显示3行,

在HarmonyOS(鸿蒙)中,TextPicker组件默认只能显示3行内容,这是由组件的设计和实现决定的。TextPicker主要用于提供用户选择的文本项,通常用于日期、时间或其他列表选择场景。为了保持界面的简洁性和用户体验的一致性,鸿蒙系统对TextPicker的显示行数进行了限制。

具体原因如下:

  • UI设计规范:鸿蒙系统的UI设计规范要求TextPicker组件在显示文本时保持简洁,避免过多信息干扰用户操作。默认显示3行可以在保证用户清晰看到选项的同时,避免界面过于拥挤。

  • 性能优化TextPicker组件的渲染和交互需要兼顾性能。限制显示行数可以减少渲染开销,提升组件的响应速度和流畅度。

  • 用户体验TextPicker通常用于快速选择操作,显示过多行可能会增加用户的选择难度和操作时间。3行的设计有助于用户快速定位和选择所需内容。

如果你需要显示更多内容,可以考虑使用其他更适合的组件或自定义控件来满足需求。

回到顶部