android——compose双向绑定

本篇文章主要用实例来体验compose双向绑定

1. 实现功能：点击图片切换Text控件里的内容

效果图：

代码：

class MainActivity : ComponentActivity() {

    private var uiState by mutableStateOf(Student())

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            ComposeBindingTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting(uiState.name)

                    Box(modifier = Modifier.padding(20.dp)) {
                        Button(onClick = { uiState = uiState.copy(name = "李四", id = 1) }) {
                            Text(text = "切换")
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello=> $name!")
}

data class Student(
    var name: String = "张三",
    val id: Int = 0
)

2. 使用MVVM框架来实现双向绑定

效果图：（同上1的效果图一样）

添加依赖：

api "androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1"

MainActivity代码如下：

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            ComposeBindingTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting()
                }
            }
        }
    }
}

@Composable
fun Greeting(mainViewModel: MainViewModel = viewModel()) {
    Text(text = "Hello=> ${mainViewModel.student?.name}")
    Box(modifier = Modifier.padding(20.dp)) {
        Button(onClick = { mainViewModel.switchName() }) {
            Text(text = "切换")
        }
    }
}

data class Student(
    var name: String = "张三",
    val id: Int = 0
)

viewmodel的代码：

class MainViewModel : ViewModel() {

    var student by mutableStateOf(Student())

    fun switchName() {
        student = student.copy(name = "李四")
    }
}