Android Compose状态实例详解

杭绢子

1.无状态组件

无状态组件（Stateless Component）指的是不持有任何内部状态的组件。这意味着它们仅仅基于传入的参数来渲染，并且当这些参数改变时，它们会重新渲染以反映新的数据。无状态组件更容易测试和维护，因为它们的行为是完全预测性的，仅依赖于输入参数。

1. @Composable
   
2. fun TodoApp() {
   
3.     var todos by remember { mutableStateOf(listOf<String>()) }
   
4.     var newTodo by remember { mutableStateOf("") }
   
5.     Column(
   
6.         modifier = Modifier.padding(16.dp)
   
7.     ) {
   
8.         TextField(
   
9.             value = newTodo,
   
10.             onValueChange = { newTodo = it },
    
11.             label = { Text("New Todo") },
    
12.             modifier = Modifier.fillMaxWidth()
    
13.         )
    
14.         Spacer(modifier = Modifier.height(8.dp))
    
15.         Button(onClick = {
    
16.             if (newTodo.isNotEmpty()) {
    
17.                 todos = todos + newTodo
    
18.                 newTodo = ""
    
19.             }
    
20.         }) {
    
21.             Text("Add Todo")
    
22.         }
    
23.         Spacer(modifier = Modifier.height(16.dp))
    
24.         TodoList(todos = todos, onRemoveTodo = { todo ->
    
25.             todos = todos.filterNot { it == todo }
    
26.         })
    
27.     }
    
28. }
    
29. @Composable
    
30. fun TodoList(todos: List<String>, onRemoveTodo: (String) -> Unit) {
    
31.     LazyColumn {
    
32.         items(todos) { todo ->
    
33.             TodoItem(todo = todo, onRemoveTodo = onRemoveTodo)
    
34.         }
    
35.     }
    
36. }
    
37. @Composable
    
38. fun TodoItem(todo: String, onRemoveTodo: (String) -> Unit) {
    
39.     Row(
    
40.         modifier = Modifier
    
41.             .fillMaxWidth()
    
42.             .padding(vertical = 4.dp),
    
43.         horizontalArrangement = Arrangement.SpaceBetween
    
44.     ) {
    
45.         Text(text = todo)
    
46.         IconButton(onClick = { onRemoveTodo(todo) }) {
    
47.             Icon(Icons.Default.Delete, contentDescription = "Delete Todo")
    
48.         }
    
49.     }
    
50. }

复制代码

2.非结构化状态

在 Jetpack Compose 中，非结构化组件（Unstructured Components）通常指的是那些不遵循严格的层次结构或状态管理规则的组件。它们可能不是由父组件严格控制其状态和行为，而是具有某种程度上的独立性。不过，在实际开发中，Jetpack Compose 更强调结构化组件（Structured Components），因为这种设计模式有助于创建更可维护、更易于理解和测试的应用程序。
然而，如果你想要实现一些功能，这些功能并不需要紧密地与父组件的状态或其他兄弟组件互动，或者你希望某些组件能够保持一定的独立性，你可以通过以下几种方式来实现“非结构化”的效果：
1. 使用

1. remember

复制代码

和

1. mutableStateOf

复制代码

管理局部状态
让组件自己管理它的状态，而不是从外部接收状态。这样，组件可以在一定程度上独立于其父组件。

1. @Composable
   
2. fun IndependentComponent() {
   
3.     var text by remember { mutableStateOf("Initial Text") }
   
4.     Column {
   
5.         TextField(
   
6.             value = text,
   
7.             onValueChange = { newText -> text = newText },
   
8.             label = { Text("Enter some text") }
   
9.         )
   
10.         Text(text)
    
11.     }
    
12. }

复制代码

2. 侧效应用 (Side Effects)
有时候，你可能会有一些副作用操作，比如网络请求、文件读写等，这些操作不应该直接影响到 UI 组件的结构。在这种情况下，可以使用 Jetpack Compose 提供的副作用 API，如

1. LaunchedEffect

复制代码

,

1. DisposableEffect

复制代码

或者

1. rememberUpdatedState

复制代码

来处理这些操作。

1. @Composable
   
2. fun SideEffectComponent(key: Any) {
   
3.     LaunchedEffect(key) {
   
4.         // 执行一些异步操作
   
5.         println("Performing side effect for key $key")
   
6.     }
   
7.     Text("This component has a side effect.")
   
8. }

复制代码

3. 事件驱动
对于某些交互，你可以采用事件驱动的方式，即组件不会直接改变状态，而是发出事件，由其他地方（如 ViewModel）来处理这些事件并更新相应的状态。

1. @Composable
   
2. fun EventDrivenComponent(onClick: () -> Unit) {
   
3.     Button(onClick = onClick) {
   
4.         Text("Click me to trigger an event")
   
5.     }
   
6. }

复制代码

4. 松散耦合
尽量减少组件之间的直接依赖，例如通过接口或回调函数传递数据，而不是直接引用其他组件的状态。这可以帮助你创建更加模块化的代码。

1. interface TodoRepository {
   
2.     fun addTodo(todo: String)
   
3. }
   
4. @Composable
   
5. fun LooseCoupledComponent(repository: TodoRepository) {
   
6.     // 使用 repository 添加 TODO，而不直接持有或修改状态
   
7. }

复制代码

虽然上述方法可以让组件看起来更加“非结构化”，但请注意，过于分散的状态管理和缺乏清晰的层次结构可能会使应用程序难以维护和理解。因此，即使是在尝试实现更灵活的设计时，也应该努力保持合理的架构和良好的实践习惯。

3.Compose状态管理

在 Jetpack Compose 中，状态管理和状态恢复是构建响应式、用户友好应用的关键部分。通过正确地管理状态，你可以确保应用程序的 UI 能够根据用户交互或数据变化做出正确的反应；而状态恢复则保证了即使在配置更改（如屏幕旋转）后，用户的进度和输入也不会丢失。
Jetpack Compose 提供了几种机制来帮助你有效地管理状态：
1.

1. remember

复制代码

和

1. mutableStateOf

复制代码

• 1. remember

  复制代码
  ：用于保存组合期间的状态值，使得这些值不会在重组时被重置。它通常与
  1. mutableStateOf

  复制代码
  一起使用。
  
• 1. mutableStateOf

  复制代码
  ：创建一个可变状态对象，当该状态发生变化时会触发 UI 的重新组合。这对于跟踪组件内部的状态非常有用。
  

1. var count by remember { mutableStateOf(0) }

复制代码

2.

1. ViewModel

复制代码

和

1. LiveData

复制代码

/

1. StateFlow

复制代码

对于更复杂的应用程序，推荐使用

1. ViewModel

复制代码

来集中管理状态。

1. ViewModel

复制代码

是生命周期感知的，并且可以安全地存储和管理 UI 相关的数据。结合

1. LiveData

复制代码

或

1. StateFlow

复制代码

，你可以轻松地将状态从

1. ViewModel

复制代码

传递给 Composable 函数。

1. class MyViewModel : ViewModel() {
   
2.     private val _count = MutableStateFlow(0)
   
3.     val count: StateFlow<Int> get() = _count
   
4.     fun increment() {
   
5.         _count.value++
   
6.     }
   
7. }
   
8. @Composable
   
9. fun CounterScreen(viewModel: MyViewModel) {
   
10.     val count by viewModel.count.collectAsState()
    
11.     Column {
    
12.         Text("Count: $count")
    
13.         Button(onClick = { viewModel.increment() }) {
    
14.             Text("Increment")
    
15.         }
    
16.     }
    
17. }

复制代码

3.

1. rememberSaveable

复制代码

当你需要保存状态以应对配置更改（例如屏幕旋转），可以使用

1. rememberSaveable

复制代码

。它不仅能在重组期间保持状态，还能在 Activity 或 Fragment 的生命周期事件中持久化状态。

1. var text by rememberSaveable { mutableStateOf("") }
   
2. TextField(
   
3.     value = text,
   
4.     onValueChange = { newText -> text = newText },
   
5.     label = { Text("Enter some text") }
   
6. )

复制代码

4.Compose状态恢复

为了实现良好的用户体验，特别是在处理配置更改时，状态恢复是非常重要的。Jetpack Compose 提供了内置的支持来简化这一过程。
1.使用

1. rememberSaveable

复制代码

正如前面提到的，

1. rememberSaveable

复制代码

是处理状态恢复的最佳实践之一。它可以在以下情况下工作：

• 配置更改：如屏幕旋转、多窗口模式切换等。
  
• 进程死亡和重启：如果系统因内存不足等原因杀死应用进程，
  1. rememberSaveable

  复制代码
  可以帮助恢复之前的状态。
  

1. // 这里的状态将在配置更改后自动恢复
   
2. var selectedTab by rememberSaveable { mutableStateOf("Home") }

复制代码

2.自定义保存器
对于更复杂的数据类型，你可以创建自定义的

1. Saver

复制代码

来定义如何序列化和反序列化状态。这允许你保存几乎任何类型的对象。

1. data class User(val id: Int, val name: String)
   
2. val userSaver = Saver<User, *>(
   
3.     save = { mapOf("id" to it.id, "name" to it.name) },
   
4.     restore = { User(it["id"] as Int, it["name"] as String) }
   
5. )
   
6. var user by rememberSaveable(stateSaver = userSaver) {
   
7.     mutableStateOf(User(1, "Alice"))
   
8. }

复制代码

到此这篇关于Android Compose状态的文章就介绍到这了,更多相关Android Compose状态内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！