Android Jetpack Compose - TextField 上的 MVVM 重构

Question

尝试 TextField 使用 MVVM 模式进行重构似乎不起作用？

我在 Log.d 时得到了输入，但发生了零重组。到处搜索，似乎找不到对此的“简单”解决方案。

似乎所有示例都在可组合项内部执行所有操作，而不是使用 MVVM？

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TextFieldRecomposeTheme {
                Surface(color = MaterialTheme.colors.background) {
                    GetInput(myVM = MyViewModel())
                }
            }
        }
    }
}

@Composable
fun GetInput(myVM: MyViewModel) {

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        OutlinedTextField(
            value = myVM.updatedClientData.firstName,
            onValueChange = { myVM.updatedClientData.firstName = it },
            label = { Text(text = "Firstname")}
        )
    }

}

class MyViewModel() : ViewModel() {

    var updatedClientData by mutableStateOf<Client>(Client())

    // This is just for testing - the data will be loaded from a remote server and set
    init {
        updatedClientData = Client(
            id = 1,
            firstName = "Test",
            lastName = "User",
            email = "test.user@domain.com",
            mobilePhone = "777666555"
        )
    }
}

data class Client(
    @SerializedName("Id")
    val id: Int = 0,
    @SerializedName("FirstName")
    var firstName: String = "",
    @SerializedName("LastName")
    val lastName: String = "",
    @SerializedName("Email")
    val email: String = "",
    @SerializedName("MobilePhone")
    val mobilePhone: String = "",
)

Answer 1

原因是您正在更新 class 中的字段。不是可变可观察对象的字段属性。只有整个 updatedClientData 的变化才会触发重组。您可以使用 myVM.updatedClientData = myVM.updatedClientData.copy(firstName = it)

修复该问题

Android Jetpack Compose - TextField 上的 MVVM 重构

Android Jetpack Compose - MVVM recompose on TextField

android

android-jetpack

android-jetpack-compose