compose LazyListState

rememberLazyListState 是 Jetpack Compose 中用于控制 LazyColumn 或 LazyRow 滚动行为的一个状态管理工具

val horizonListState = rememberLazyListState()

 LazyRow(
                state = listState,
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight(),
                reverseLayout = true
            ) 
。。。。。。

通过 LazyListState我们可以:

1.控制列表滚动

例如下面,当用户点击选项触发 selectedIndex 变化之后,可以通过如下代码,将列表滚动到 当前选中的item 

    LaunchedEffect(selectedIndex) {
        LogUtils.d("LaunchedEffect 当前选中项 selectedIndex=$selectedIndex,")
        val center = horizonListState.layoutInfo.viewportEndOffset / 2
        val selectedItem = horizonListState.layoutInfo.visibleItemsInfo.getOrNull(selectedIndex + 1)
        selectedItem?.let {
            horizonListState.scrollToItem(selectedIndex + 1, -center + it.size / 2)
        }
    }

2 监听滚动位置,触发自动加载

   // 横向列表统计数据无限加载检测
    LaunchedEffect(horizonListState, currentStatistics) {
        snapshotFlow { horizonListState.layoutInfo }.collect { layoutInfo ->
            //自动加载
            if (layoutInfo.visibleItemsInfo.isNotEmpty() && !currentStatistics.isNullOrEmpty() && layoutInfo.visibleItemsInfo.last().index >= currentStatistics!!.size - 3) {
                loadMoreStatistic(viewModel, viewType)
            }
        }
    }

下拉刷新和上拉加载更多是常见的列表操作,可以使用Compose框架来实现。Compose提供了SwipeRefresh和LazyColumn组件来实现这些功能。 首先,导入Compose和SwipeRefresh库: ```kotlin import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.foundation.lazy.rememberLazyListState import androidx.compose.material.Scaffold import androidx.compose.material.SwipeRefresh import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.unit.dp ``` 然后,在你的函数中实现SwipeRefresh和LazyColumn: ```kotlin @Composable fun MyScreen() { val context = LocalContext.current val viewModel = remember { MyViewModel() } val lazyListState = rememberLazyListState() Scaffold( topBar = { MyTopBar() } ) { SwipeRefresh( state = rememberSwipeRefreshState(isRefreshing = viewModel.loading), onRefresh = { viewModel.refresh() } ) { LazyColumn( state = lazyListState, contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp) ) { itemsIndexed(viewModel.items) { index, item -> MyListItem(item = item) if (index == viewModel.items.lastIndex && !viewModel.loading) { viewModel.loadMore() } } } } } } ``` 在这个例子中,我们创建了一个MyScreen函数,它包含一个SwipeRefresh和一个LazyColumn。SwipeRefresh的状态由ViewModel中的loading属性控制,当下拉刷新时,我们会调用ViewModel中的refresh函数。LazyColumn使用rememberLazyListState来保存滚动位置,并在最后一个项目被显示时调用ViewModel中的loadMore函数来加载更多数据。 最后,我们需要创建一个ViewModel来处理数据的加载和刷新: ```kotlin class MyViewModel { private val _items = mutableStateListOf<String>() val items: List<String> get() = _items private var page = 0 var loading by mutableStateOf(false) private set private val api = MyApi() fun refresh() { page = 0 loading = true api.getItems(page) { newItems -> _items.clear() _items.addAll(newItems) loading = false } } fun loadMore() { page++ loading = true api.getItems(page) { newItems -> _items.addAll(newItems) loading = false } } } ``` 这个ViewModel包含一个items列表和一个loading状态。当刷新或加载更多时,我们会调用相应的函数来获取数据并更新items列表。在这个例子中,我们使用了一个简单的MyApi类来获取数据,但你可以使用任何你想要的数据源。 这就是用Compose实现下拉刷新和上拉加载更多的基本方法。你可以根据自己的需求和UI来调整代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值