点击触发时如何打乱列表并刷新展示？Android Jetpack Compose开发问题

你的代码存在4个核心问题导致点击无效果：

• shuffled()是Kotlin的无副作用方法，仅返回新的打乱后列表，不会修改原有列表，你原点击逻辑中没有将打乱后的新列表赋值给状态，状态未更新自然不会触发UI刷新
• UI层声明的factsLists状态没有用remember包裹，每次Composable重组时都会被重置为ViewModel返回的原始列表，之前的修改全部失效
• FactCard内部用remember缓存了传入的quote参数，导致外层传入新的文案时，内部状态不会同步更新，即使列表变化卡片展示内容也不会刷新
• viewModel.getFact(context)直接写在Composable顶层，每次页面重组都会重复触发Assets文件读取逻辑，属于无用重复调用

方案1：最小修改快速生效 #

步骤1：修正初始化数据的调用逻辑 #

将数据读取逻辑用LaunchedEffect包裹，仅在页面首次进入时调用一次：

LaunchedEffect(Unit) {
    viewModel.getFact(context)
}

步骤2：修正UI层状态声明与点击逻辑 #

when (val result = viewModel.uiState.collectAsState().value) {
    is ViewState.Error -> {
        Toast.makeText(
            context,
            "Error ${result.exception}",
            Toast.LENGTH_SHORT
        ).show()
    }
    is ViewState.Success -> {
        // 用remember持久化列表状态，仅当ViewModel返回的原始列表变化时才重置
        val factsLists = remember(result.fact) {
            mutableStateOf(result.fact)
        }
        val currentFact = factsLists.value.first()
        FactCard(quote = currentFact.toString()) {
            // 点击时将打乱后的新列表赋值给状态，触发UI重组
            factsLists.value = factsLists.value.shuffled()
        }
    }
}

步骤3：删除FactCard内部多余的状态 #

直接使用外层传入的quote参数渲染即可，不需要内部再缓存状态：

@Composable
fun FactCard(quote: String , onClick : ()-> Unit) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .clickable { onClick() }
    ) {
        Text(text = quote)
    }
}

方案2：符合单向数据流规范的实现（更推荐） #

将列表操作逻辑放到ViewModel中维护，UI层仅做事件触发与状态渲染：

步骤1：ViewModel中新增打乱列表方法 #

fun shuffleFacts() {
    val currentState = _uiState.value
    if (currentState is ViewState.Success) {
        // 打乱后更新UI状态
        _uiState.value = ViewState.Success(currentState.fact.shuffled())
    }
}

步骤2：简化UI层逻辑 #

LaunchedEffect(Unit) {
    viewModel.getFact(context)
}

when (val result = viewModel.uiState.collectAsState().value) {
    is ViewState.Error -> {
        Toast.makeText(context, "Error ${result.exception}", Toast.LENGTH_SHORT).show()
    }
    is ViewState.Success -> {
        val currentFact = result.fact.first()
        FactCard(quote = currentFact.toString()) {
            // 点击时直接调用ViewModel的方法即可
            viewModel.shuffleFacts()
        }
    }
}

FactCard的修改和方案1一致即可。

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