如何让LazyColumn/LazyRow预组合屏幕外的列表项？

一、让Lazy列表提前组合更多屏幕外项 #

默认情况下，LazyRow/LazyColumn仅在滚动接近时才组合下一项，针对加载耗时的项（如视频、图片），可以通过设置prefetchDistance参数控制提前预组合的距离（单位为像素），实现提前加载。

修改你的示例代码，给LazyRow添加该参数：

val prefetchDistance = 500.dp.toPx() // 提前500像素开始预组合项

LazyRow(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    contentPadding = PaddingValues(16.dp),
    prefetchDistance = prefetchDistance // 新增预取距离配置
) {
    items(30) {
        var loading by remember {
            mutableStateOf(true)
        }

        LaunchedEffect(Unit) {
            println("Composing First LazyRow item: $it")
            delay(1000)
            loading = false
        }
        MyRow(itemWidth, loading, it)
    }
}

@Composable
private fun MyRow(itemWidth: Dp, loading: Boolean, it: Int) {
    Box(
        modifier = Modifier
            .size(itemWidth, 100.dp)
            .background(if (loading) Color.Red else Color.Green, RoundedCornerShape(16.dp))
            .padding(16.dp)
    ) {
        Text("Row $it", fontSize = 26.sp, color = Color.White)
    }
}

你可根据实际需求调整prefetchDistance的数值，数值越大提前组合的项越多，但需注意避免过大导致内存占用过高。

二、在Lazy列表中保存Composable状态（替代moveableContentOf） #

moveableContentOf仅适用于一次性组合的Row/Column，Lazy列表基于回收复用机制，可通过以下两种方式保存状态：

方法1：使用rememberSaveable + 唯一Key #

用rememberSaveable替代remember，并绑定每个item的唯一标识（如示例中的it），状态会在item离开组合树后被持久化，再次显示时自动恢复：

items(30) { index ->
    var loading by rememberSaveable(key = index) {
        mutableStateOf(true)
    }

    LaunchedEffect(Unit) {
        if (loading) { // 仅状态为true时执行加载逻辑
            println("Composing LazyRow item: $index")
            delay(1000)
            loading = false
        }
    }
    MyRow(itemWidth, loading, index)
}

方法2：状态提升到父组件/ViewModel #

针对视频进度、表单输入等复杂状态，建议将状态提升到父组件或ViewModel中，用集合存储每个item的状态，不受Composable生命周期影响：

// ViewModel中定义状态管理逻辑
class ItemViewModel : ViewModel() {
    private val _itemLoadingStates = mutableStateMapOf<Int, Boolean>()
    val itemLoadingStates: Map<Int, Boolean> = _itemLoadingStates

    fun initItemState(index: Int) {
        if (!_itemLoadingStates.containsKey(index)) {
            _itemLoadingStates[index] = true
        }
    }

    fun markItemLoaded(index: Int) {
        _itemLoadingStates[index] = false
    }
}

// 在Composable中使用
val viewModel: ItemViewModel = viewModel()

LazyRow(/* 原有参数 */) {
    items(30) { index ->
        viewModel.initItemState(index)
        val loading = viewModel.itemLoadingStates[index] ?: true

        LaunchedEffect(Unit) {
            if (loading) {
                delay(1000)
                viewModel.markItemLoaded(index)
            }
        }
        MyRow(itemWidth, loading, index)
    }
}

内容的提问来源于stack exchange，提问作者Thracian