HarmonyOS 鸿蒙Next ListItemGroup会影响到onScrollIndex事件的监听嘛?

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

HarmonyOS 鸿蒙Next ListItemGroup会影响到onScrollIndex事件的监听嘛?

有问题的代码如下,使用ListItemGroup就监听不到onScrollIndex事件中起始位置和终止位置的变化,上滑的时候,顶部的0-0一直没变~

@Entry
@Component
struct TestPage {
  private nums: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
  @State startIndex: number = 0
  @State endIndex: number = 0

  @Builder
  headerList() {
    Row() {
      Text('ListItemGroup的顶部')
      Text(`${this.startIndex} - ${this.endIndex}`)
    }.width('100%').height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)
  }

  build() {
    List() {
      ListItemGroup({ header: this.headerList() }) {
        ForEach(this.nums, (item: number) => {
          ListItem() {
            Column() {
              Text(item.toString()).width('100%').height(100).textAlign(TextAlign.Center).align(Alignment.Center)
              Divider().width('100%').height(1).color(Color.Black)
            }
          }
        })
      }
    }
    .width('100%')
    .height('100%')
    .sticky(StickyStyle.Header)
    .onScrollIndex((start: number, end: number) => {
      this.startIndex = start
      this.endIndex = end
    })
  }
}

把ListItemGroup去掉,就可以正常监听到onScrollIndex中的变化,顶部的0-0会随着滑动而改变?这是咋回事~可以帮我看看嘛?


@Entry
@Component
struct TestPage {
  private nums: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
  @State startIndex: number = 0
  @State endIndex: number = 0

  @Builder
  headerList() {
    Row() {
      Text('ListItemGroup的顶部')
      Text(`${this.startIndex} - ${this.endIndex}`)
    }.width('100%').height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)
  }

  build() {
    Column() {
      Row() {
        Text('ListItemGroup的顶部')
        Text(`${this.startIndex} - ${this.endIndex}`)
      }.width('100%').height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)

      List() {
        ForEach(this.nums, (item: number) => {
          ListItem() {
            Column() {
              Text(item.toString()).width('100%').height(100).textAlign(TextAlign.Center).align(Alignment.Center)
              Divider().width('100%').height(1).color(Color.Black)
            }
          }
        })
      }

      .width('100%')
      .height('100%')
      .sticky(StickyStyle.Header)
      .onScrollIndex((start: number, end: number) => {
        this.startIndex = start
        this.endIndex = end
      })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next ListItemGroup会影响到onScrollIndex事件的监听嘛?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复
import { hilog } from '[@kit](/user/kit).PerformanceAnalysisKit'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct TestPage {
private nums: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
[@State](/user/State) startIndex: number = 0
[@State](/user/State) endIndex: number = 0

[@Builder](/user/Builder)
headerList() {
Row() {
Text('ListItemGroup的顶部')
Text(`${this.startIndex} - ${this.endIndex}`)
}.width('100%').height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)
}

build() {
Column() {
Row() {
Text('ListItemGroup的顶部')
Text(`${this.startIndex} - ${this.endIndex}`)
}.width('100%').height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange)

List() {
ForEach(this.nums, (item: number) => {
ListItem() {
Column() {
Text(item.toString()).width('100%').height(100).textAlign(TextAlign.Center).align(Alignment.Center)
Divider().width('100%').height(1).color(Color.Black)
}
}
})
}

.width('100%')
.height('100%')
.sticky(StickyStyle.Header)
.onScrollVisibleContentChange((start, end) => {
hilog.debug(0x000000, 'rainrain', 'start == ' + start.index + ' end == ' + end.index)
this.startIndex = start.index
this.endIndex = end.index
})
}
}
}

更多关于HarmonyOS 鸿蒙Next ListItemGroup会影响到onScrollIndex事件的监听嘛?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


api 12 以上 onScrollVisibleContentChange 。里面数据比scroll的准确

才发现,这个API解决不了ListItemGroup组件当前可见的ListItem元素索引值,还得用老办法onVisibleAreaChange

.onScrollVisibleContentChange((start, end) => { this.startIndex = start.itemIndexInGroup as number this.endIndex = end.itemIndexInGroup as number }) 这个不行吗?

ListItemGroup没有类似onScrollIndex的API,拿不到当前的ListItemGroup子组件ListItem的索引值。

可以使用API onVisibleAreaChange来监听ListeItem的变化。当ListeItem被滚动到可见区域,触发onVisibleAreaChange回调,拿到当前ListeItem索引值。

关于该问题已在常见问题手册中归类,可查看链接(如1楼描述):https://developer.huawei.com/consumer/cn/doc/architecture-guides/develop-arkui-63-0000002130558377

核心代码如下

 ListItemGroup({ header: this.ListGroupHead(itemGroup.title) }) {
   ForEach(itemGroup.contacts, (item: Contact, index: number) => {
     ListItem() {
       Text(item.name)
     }
      // ListItemGroup的可见区域发生变化时,触发API,并且可以拿到对应的item,List组件的索引值等诸多参数。
      // [0, 1],阈值数组。其中,每个阈值代表组件可见面积。可见区域变成0%和100%的时候,会触发,再根据isVisible,就可以判断当前是0%还是100%
     .onVisibleAreaChange([0, 1], (isVisible: boolean, currRatio: number) => {
       // isVisible:表示组件的可见面积与自身面积的比值与上一次变化相比的情况,比值变大为true,比值变小为false
      if (isVisible) {
         hilog.info(null, 'onVisibleAreaChange: isVisible' + currRatio + item.name + index, null)
      } else {
         hilog.info(null, 'onVisibleAreaChange: unVisible' + currRatio + item.name + index, null)
      }
     })
   })
 }<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

这个答案老了,看楼下新的api

谢谢!!!!!!

可以解决,谢谢老哥

使用onScrollVisibleContentChange来实现~~

[@Entry](/user/Entry)
[@Component](/user/Component)
struct TestPage {
  private nums: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
  [@State](/user/State) startIndex: number = 0
  [@State](/user/State) endIndex: number = 0

@Builder headerList() { Row() { Text(‘ListItemGroup的顶部’) Text(${<span class="hljs-keyword">this</span>.startIndex} - ${<span class="hljs-keyword">this</span>.endIndex}) }.width(‘100%’).height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange) }

build() { List() { ListItemGroup({ header: this.headerList() }) { ForEach(this.nums, (item: number) => { ListItem() { Column() { Text(item.toString()).width(‘100%’).height(100).textAlign(TextAlign.Center).align(Alignment.Center) Divider().width(‘100%’).height(1).color(Color.Black) } } }) } } .width(‘100%’) .height(‘100%’) .sticky(StickyStyle.Header) .onScrollVisibleContentChange((start, end) => { this.startIndex = start.itemIndexInGroup as number this.endIndex = end.itemIndexInGroup as number }) } } <button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

[@Entry](/user/Entry)
[@Component](/user/Component)
struct TestPage {
  private nums: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
  [@State](/user/State) startIndex: number = 0
  [@State](/user/State) endIndex: number = 0

@Builder headerList() { Row() { Text(‘ListItemGroup的顶部’) Text(${<span class="hljs-keyword">this</span>.startIndex} - ${<span class="hljs-keyword">this</span>.endIndex}) }.width(‘100%’).height(70).justifyContent(FlexAlign.Center).backgroundColor(Color.Orange) }

build() { List() { ListItemGroup({ header: this.headerList() }) { ForEach(this.nums, (item: number, index: number) => { ListItem() { Column() { Text(item.toString()).width(‘100%’).height(100).textAlign(TextAlign.Center).align(Alignment.Center) Divider().width(‘100%’).height(1).color(Color.Black) } }

      .onVisibleAreaChange([<span class="hljs-number">0</span>, <span class="hljs-number">1</span>], (isVisible: boolean, currRatio: number) =&gt; {
        <span class="hljs-comment">// isVisible:表示组件的可见面积与自身面积的比值与上一次变化相比的情况,比值变大为true,比值变小为false</span>
        <span class="hljs-comment">// TODO 这里的index就是当前页面展示的列表的起始和终止,不是很科学,但是可以用</span>
        <span class="hljs-keyword">if</span> (isVisible) {
          console.info(<span class="hljs-literal">null</span>, <span class="hljs-string">'onVisibleAreaChange: isVisible'</span> + currRatio + <span class="hljs-string">'--------'</span> + item.toString() + <span class="hljs-string">'--------'</span> + index, <span class="hljs-literal">null</span>)
        } <span class="hljs-keyword">else</span> {
          console.info(<span class="hljs-literal">null</span>, <span class="hljs-string">'onVisibleAreaChange: unVisible'</span> + currRatio + item.toString() + index, <span class="hljs-literal">null</span>)
        }
      })
    })
  }
}
.width(<span class="hljs-string">'100%'</span>)
.height(<span class="hljs-string">'100%'</span>)
.sticky(StickyStyle.Header)

} }<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

HarmonyOS 鸿蒙Next ListItemGroup不会直接影响到onScrollIndex事件的监听

在HarmonyOS中,ListItemGroup是用于组织和管理列表项的一个组件,它主要用于分组显示列表数据,提高UI的层次感和可读性。而onScrollIndex事件则是用于监听列表滚动过程中当前可见项的索引变化。

从机制上看,ListItemGroup的添加或修改并不会改变列表滚动的基本逻辑,也不会打断onScrollIndex事件的正常监听。也就是说,只要列表的滚动行为发生,且该行为符合触发onScrollIndex事件的条件,那么无论是否存在ListItemGroup,onScrollIndex事件都会被正常触发。

当然,如果在实现过程中,对ListItemGroup进行了特殊处理,如自定义了滚动逻辑或修改了列表项的显示方式,这些操作可能会间接影响到onScrollIndex事件的监听。但这种情况并非由ListItemGroup本身导致,而是由开发者的实现方式决定的。

因此,在一般情况下,HarmonyOS 鸿蒙的Next ListItemGroup不会影响到onScrollIndex事件的监听。如果在实际开发中遇到相关问题,建议检查滚动逻辑和事件监听的实现方式,确保它们符合HarmonyOS的组件规范。

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

回到顶部