Android Compose 十：常用组件列表监听

news2024/11/15 0:05:09

1 去掉超出滑动区域时的拖拽的阴影

即 overScrollMode
在这里插入图片描述
代码如下

 CompositionLocalProvider(LocalOverscrollConfiguration provides null) {
        LazyColumn(
        ) {
            items(list, key = {list.indexOf(it)}){
                Row(Modifier.animateItemPlacement(tween(durationMillis = 250))) {
                    Text(text = "条目>>${it}")
                }
            }
        }
    }

效果

在这里插入图片描述
如果你都不需要这个效果，可以在MyApplicationTheme的content里包一层CompositionLocalProvider
MyApplicationTheme

CompositionLocalProvider
CompositionLocal 是定义数据的方式，而 CompositionLocalProvider 是在 Compose UI 树中传递这些数据的工具。更多自行百度吧

2 滑动监听

2.1 state的监听

  val lazyListState = rememberLazyListState()
    LazyColumn(
        state = lazyListState
    ) {
        items(list, key = { list.indexOf(it) }) {
            Row(Modifier.animateItemPlacement(tween(durationMillis = 250))) {
                Text(text = "条目>>${it}")
            }
        }
    }

官方文档有以下描述
在这里插入图片描述
大意就是，我们需要监听滑动的状态，用于不同的处理
那么我们之前使用recyclerview的时候，可以通过LayoutManager监听滑动，并且可以获取到当前显示的第一条条目和最后一条条目；
然后就可以判断是否上拉加载更多，或者下拉刷新
此处我们改吧改吧

LaunchedEffect(lazyListState) {
        snapshotFlow { lazyListState.isScrollInProgress }   //监听是否在滑动
            .collect {
                Log.i("bl_test","it>>${it}")
                Log.i("bl_test"," lazyListState.firstVisibleItemIndex>>${ lazyListState.firstVisibleItemIndex}")
            }
    }

当我们滑动开始和停止的时候打印如下日志

2024-06-06 11:51:49.816 20115-20115/com.zqq.myapplication I/bl_test: it>>true
2024-06-06 11:51:49.816 20115-20115/com.zqq.myapplication I/bl_test:  lazyListState.firstVisibleItemIndex>>0
2024-06-06 11:51:52.091 20115-20115/com.zqq.myapplication I/bl_test: it>>false
2024-06-06 11:51:52.091 20115-20115/com.zqq.myapplication I/bl_test:  lazyListState.firstVisibleItemIndex>>6

这里暂时不知如何判断条目完全显示的情况，LayoutManager是有这个方法的；
方案就是 lazyListState 可以获取到第一条目的偏移量可以通过此来判断；

更多的监听前面写过interactions 状态监听

  LaunchedEffect(lazyListState){
        lazyListState.interactionSource.interactions.collect{
            Log.i("bl_test","it>>${it}")
            Log.i("bl_test","it>>${it.javaClass}")
            Log.i("bl_test","it>>${it is DragInteraction}")
            Log.i("bl_test","it>>${it is DragInteraction.Start}")
            Log.i("bl_test","it>>${it is DragInteraction.Stop}")
            Log.i("bl_test","it>>${it is DragInteraction.Cancel}")

            if(it is DragInteraction.Stop){  //滑动结束 获取第一条显示的条目
                Log.i("bl_test"," lazyListState.firstVisibleItemIndex>>${ lazyListState.firstVisibleItemIndex}")
                Log.i("bl_test"," lazyListState.firstVisibleItemScrollOffset>>${ lazyListState.firstVisibleItemScrollOffset}")
            }
        }
    }

结果
在这里插入图片描述

Modifier.scrollable

 val scrollableState = rememberScrollableState(){
        Log.i("bl_test","it>>"+it)
        it
    }

    LazyColumn(
        state = lazyListState,
        modifier = Modifier.scrollable(
            state = scrollableState,
            orientation = Orientation.Vertical
        )
    ) {
        items(list, key = { list.indexOf(it) }) {
            Row(Modifier.animateItemPlacement(tween(durationMillis = 250))) {
                Text(text = "条目>>${it}")
            }
        }
    }

rememberScrollableState 的翻译
在这里插入图片描述
打印日志效果

当未滑动到顶部或者底部时回调it值一直为0
滑动到顶部继续拖拽时值大于0
滑动到底部时值小于0
惯性滑动到顶部时值大于0 后递减

…(此处省略大部分值)
惯性滑动到顶部时值小于0 递增

…(此处省略大部分值)

依据此值应该可以判断出滑动到了底部或者顶部

Modifier .verticalScroll()
报错了
Modifier .nestedScroll 监听滑动状态

 val nestedConnection  = remember {
        object : NestedScrollConnection{
            override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
                Log.i("bl_test","onPostFling")
                return super.onPostFling(consumed, available)
            }

            override fun onPostScroll(
                consumed: Offset,
                available: Offset,
                source: NestedScrollSource
            ): Offset {
                Log.i("bl_test","onPostScroll")
                return super.onPostScroll(consumed, available, source)
            }

            override suspend fun onPreFling(available: Velocity): Velocity {
                Log.i("bl_test","onPreFling")
                return super.onPreFling(available)
            }

            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                Log.i("bl_test","onPreScroll")
                return super.onPreScroll(available, source)
            }
        }
    }

    LazyColumn(
        state = lazyListState,
        modifier = Modifier
            .nestedScroll(
                connection = nestedConnection
            )
    ) {
        items(list, key = { list.indexOf(it) }) {
            Row(Modifier.animateItemPlacement(tween(durationMillis = 250))) {
                Text(text = "条目>>${it}")
            }
        }
    }

结果
在这里插入图片描述