HarmonyOS 鸿蒙Next TextPicker()组件设为两列,如何实现这两列的滑动互不干扰?
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
没找到对应的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
组件设为两列并实现这两列的滑动互不干扰,可以通过以下方式实现:
-
自定义布局:首先,需要自定义一个包含两个
TextPicker
的布局,每个TextPicker
占据一列。 -
独立事件处理:为每个
TextPicker
设置独立的事件监听器,确保它们的滑动事件不会相互干扰。在事件监听器中处理各自的滑动逻辑。 -
同步数据(可选):如果两列之间存在数据关联,需要在滑动事件中手动同步数据,但不影响各自的滑动行为。
-
设置属性:确保两个
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