Jetpack Compose中使用类属性时UI不更新问题求助

你遇到的问题核心是Compose的重组触发依赖状态的可观察变化：你用mutableStateOf持有了Cards对象的引用，但修改对象内部的number属性时，对象本身的引用没有改变，Compose无法感知到内部属性的更新，所以不会触发UI重组。

下面提供三种可行的解决方式，你可以根据场景选择：

方案一：让自定义类的属性成为可观察状态 #

把Cards类里的number改成mutableStateOf类型，让属性本身具备可观察能力，Compose读取它时会自动订阅变化：

class Cards {
    var number by mutableStateOf(3)

    fun incNum() {
        number++
    }
}

@Composable
fun TestApp() {
    val myCard by remember { mutableStateOf(Cards()) }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize(),
    ) {
        Button(onClick = {
            myCard.incNum()
        }) {
            Text(
                text = "Clicks: ${myCard.number}",
                fontSize = 50.sp,
            )
        }
    }
}

修改后，每次调用incNum()改变number时，Compose能感知到属性变化，自动触发UI更新。

方案二：将状态提升到Composable层级 #

如果不需要把状态封装在自定义类里，可以直接在Composable中单独管理number的状态，这是Compose推荐的轻量状态管理方式：

@Composable
fun TestApp() {
    var number by remember { mutableStateOf(3) }

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize(),
    ) {
        Button(onClick = {
            number++
        }) {
            Text(
                text = "Clicks: $number",
                fontSize = 50.sp,
            )
        }
    }
}

这种方式更简洁，当状态需要在多个Composable间共享时，还可以进一步向上提升到父Composable或ViewModel中。

方案三：使用StateFlow（适合复杂业务场景） #

如果你的Cards类需要处理更复杂的业务逻辑，比如和ViewModel配合，可以用StateFlow包装状态，然后在Composable中通过collectAsState订阅：

import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow

class Cards {
    private val _number = MutableStateFlow(3)
    val number: StateFlow<Int> = _number.asStateFlow()

    fun incNum() {
        _number.value++
    }
}

@Composable
fun TestApp() {
    val myCard = remember { Cards() }
    val number by myCard.number.collectAsState()

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier.fillMaxSize(),
    ) {
        Button(onClick = {
            myCard.incNum()
        }) {
            Text(
                text = "Clicks: $number",
                fontSize = 50.sp,
            )
        }
    }
}

这种方式能更好地分离UI和业务逻辑，适合中大型项目的状态管理。

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