HarmonyOS 鸿蒙Next TextPicker()组件设为两列,如何实现这两列的滑动互不干扰?

发布于 1周前 作者 gougou168 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next TextPicker()组件设为两列,如何实现这两列的滑动互不干扰?

TextPicker()组件,一共设为两列,如果实现,这两列,各滑各的呢,互不干扰~

现在的现象是,滑动左侧年份的时候,月份自动回到一月份。


@Entry
@Component
struct TextPickerExample {
  @State select: number[] = [1, 1]
  private cascade: TextCascadePickerRangeContent[] = [
    {
      text: '2024年',
      children: [{ text: '一月份' }, { text: '二月份' }, { text: '三月份' }, { text: '四月份' }, { text: '五月份' }, { text: '六月份' },
        { text: '七月份' }, { text: '八月份' }, { text: '九月份' }, { text: '十月份' }, { text: '十一月份' }, { text: '十二月份' }]
    },
    {
      text: '2025年',
      children: [{ text: '一月份' }, { text: '二月份' }, { text: '三月份' }, { text: '四月份' }, { text: '五月份' }, { text: '六月份' },
        { text: '七月份' }, { text: '八月份' }, { text: '九月份' }, { text: '十月份' }, { text: '十一月份' }, { text: '十二月份' }]
    },
    {
      text: '2026年',
      children: [{ text: '一月份' }, { text: '二月份' }, { text: '三月份' }, { text: '四月份' }, { text: '五月份' }, { text: '六月份' },
        { text: '七月份' }, { text: '八月份' }, { text: '九月份' }, { text: '十月份' }, { text: '十一月份' }, { text: '十二月份' }]
    },
    {
      text: '2027年',
      children: [{ text: '一月份' }, { text: '二月份' }, { text: '三月份' }, { text: '四月份' }, { text: '五月份' }, { text: '六月份' },
        { text: '七月份' }, { text: '八月份' }, { text: '九月份' }, { text: '十月份' }, { text: '十一月份' }, { text: '十二月份' }]
    },
    {
      text: '2028年',
      children: [{ text: '一月份' }, { text: '二月份' }, { text: '三月份' }, { text: '四月份' }, { text: '五月份' }, { text: '六月份' },
        { text: '七月份' }, { text: '八月份' }, { text: '九月份' }, { text: '十月份' }, { text: '十一月份' }, { text: '十二月份' }]
    }
  ]

  build() {
    Column() {
      TextPicker({ range: this.cascade })
        .canLoop(false)
        .selectedIndex(this.select)
        .onChange((value: string | string[], index: number | number[]) => {
          this.select = index as number[]
        })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next TextPicker()组件设为两列,如何实现这两列的滑动互不干扰?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

没找到对应的API。猜测应该是TextPicker无法判断 二级数据是否一致的操作。所以它只能滑到1。解决办法,写两个。效果好像没区别

深色代码主题
复制
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TextPickerExample {
  [@State](/user/State) select: number[] = [1, 1]
  private year: TextCascadePickerRangeContent[] = [
    { text: '2024年' }, { text: '2025年' }, { text: '2026年' }, { text: '2027年' }, { text: '2028年' }
  ]
  private month: TextCascadePickerRangeContent[] =
    [{ text: '一月份' }, { text: '二月份' }, { text: '三月份' }, { text: '四月份' }, { text: '五月份' },
      { text: '六月份' },
      { text: '七月份' }, { text: '八月份' }, { text: '九月份' }, { text: '十月份' }, { text: '十一月份' },
      { text: '十二月份' }]

build() { Column() { Row() { TextPicker({ range: this.year }) .canLoop(false) .selectedIndex(this.select) TextPicker({ range: this.month }) .canLoop(false) .selectedIndex(this.select) } } } }

更多关于HarmonyOS 鸿蒙Next TextPicker()组件设为两列,如何实现这两列的滑动互不干扰?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢~也是一种办法!!!

在HarmonyOS鸿蒙系统中,若要将TextPicker组件设为两列并实现这两列的滑动互不干扰,可以通过以下方式实现:

  1. 自定义布局:首先,需要自定义一个包含两个TextPicker的布局,每个TextPicker占据一列。

  2. 独立事件处理:为每个TextPicker设置独立的事件监听器,确保它们的滑动事件不会相互干扰。在事件监听器中处理各自的滑动逻辑。

  3. 同步数据(可选):如果两列之间存在数据关联,需要在滑动事件中手动同步数据,但不影响各自的滑动行为。

  4. 设置属性:确保两个TextPicker的滚动方向、滚动范围等属性设置正确,避免误操作导致的相互影响。

示例代码片段(简化):

<DirectionalLayout
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="horizontal">
    <TextPicker
        ohos:id="$+id:textPicker1"
        ohos:width="0dp"
        ohos:weight="1"
        ohos:height="match_parent"
        ohos:entries="@array/entries1" />
    <TextPicker
        ohos:id="$+id:textPicker2"
        ohos:width="0dp"
        ohos:weight="1"
        ohos:height="match_parent"
        ohos:entries="@array/entries2" />
</DirectionalLayout>

在Java/JS/ETS代码中为两个TextPicker分别设置事件监听。

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

回到顶部