Jetpack Compose 中的状态管理

Posted RikkaTheWorld

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jetpack Compose 中的状态管理相关的知识,希望对你有一定的参考价值。

文章目录

1. 概述

Compose 是用声明式来描述 UI, @Composable 注解所修饰的函数必须是一个没有返回值的纯函数,就算有副作用也是可控的,副作用的管理有 Effect,之后再去了解。

函数式编程和状态机是矛盾的、冲突的。假设有这么一个场景:有一个展示文案的TextView,和一个Button,每次点击 Button,都要改变一下 TextView 上的文案:

var id = 0
...
Column 
    Text(text = "$id")  // 展示文案的 TextView
    
    TextButton(onClick = 
        id++            // // 每次点击 Button 都对 id 加1 
        这里要如何改变上面 Text 的文案??????
    ) 
        Text(text = "点击我对 id 加1")
    

因为 TextTextButton 都是是被 Composable 修饰的可组合项,我们不能在一个可组合项中去引用另一个可组合项,那此我们如何更新 Text 中的文案呢?

Jetpack Compose 提供了一些状态的 API, 它关联了状态和这些可组合项,用于解决上面提出的问题。

2. 状态的更新 和 remember Api

Compose 只有唯一的更新手段:以新的参数重新调用可组合项,触发 Compose 重组

请看下面官方代码:

@Composable
fun HelloContent() 
   Column(modifier = Modifier.padding(16.dp)) 
       Text(
           text = "Hello!",
           modifier = Modifier.padding(bottom = 8.dp),
           style = MaterialTheme.typography.h5
       )
       OutlinedTextField(
           value = "",
           onValueChange =  ,
           label =  Text("Name") 
       )
   

该页面所呈现的是静态的,没有任何反应,我们甚至不能在 OutlinedTextField 中输入文字:

Jetpack 提供了 remeber Api 用于存储属性, 它将对象存储在内存中。

2.1 remember api

在初始组合期间(即初始化页面),remember 计算的值会存储在该组合中,并且在重组期间,会返回存储的值。

创建用法如下:

val name: String = remember  "rikka" 

remember 函数会返回一个可组合项,它会缓存我们在 lambda 表达式里面创造的值,因为它可组合的属性,所以它可以做为组合的状态而存在。

2.2 可观察对象 MutableState

上面的代码中,使用 remember 创造出来的状态是不可变的, 但是大部分情况下状态是可变的,所以为了引入可变的机制, Compose 提供了一个可观察模型: MutableState , 它能够在值发生变化时更新UI。

interface MutableState<T> : State<T> 
    override var value: T

MutableState 是一个可变值的持有者, 在执行 Composeable 函数期间会去读取 value 值,当前的 RecomposeScope 将会订阅这个值的读写。当更改 value 属性时,将会通知任何订阅了该值的 RecomposeScope,就会触发重组。

这里注意:如果 value 被更改了,但是更改前后属性一样,则不会发生重组。

我们可以使用 mutableStateOf 来创建它,并且用 remember 包装它,以便在可组合项中使用, 代码如下:

val name: MutableState<String> = remember  mutableStateOf("rikka") 

// 状态的更新:
Text(
   modifier = Modifier.clickable  name.value = "vera" ,
   text = name.value
 )

我们可以使用属性委托, 使用 by 来解包 MutableState

var name: String by remember  mutableStateOf("rikka") 
Text(
    modifier = Modifier.clickable  name = "vera" ,
    text = name
)

2.3 LiveData、Flow、RxJava

android 中,我们往往在逻辑层使用 LiveDataFlow 做为可观察对象, 而非 MutableState,也就是说 LiveData、 Flow、 Observable 不能够直接往 Compose 上套。这该怎么办呢? 难道要用 MutableState 再去观察 LiveData?

Jetpack 提供了这种支持,它支持上述几个常用的可观察模型转化成 MutableState

  • LiveData 转化成 MutableState,使用 observeAsState
// ViewModel
private val _name = MutableLiveData("rikka")
val name: LiveData<String>
    get() = _name

// UI 层
val name by viewModel.name.observeAsState()
Text(
    text = name ?: "",
)
  • Flow 转化成 MutableState, 使用 collectAsState
// ViewModel
private val _name = MutableStateFlow("rikka")
val name: StateFlow<String>
    get() = _name

// UI 层
val name by viewModel.name.collectAsState()
Text(
    text = name,
)
  • Rx 转化成 MutableState,使用 subscribeAsState
val name: String by observable.subscribeAsState("rikka")
Text(
    text = name
)

这样我们就可以继续在代码中使用 LiveData、Flow ,而不用担心它们无法和 Compose 进行联动了。

2.4 配置变更后的状态保持

有时候我们的配置可能会变更,例如典型的翻转屏幕,这样的话使用原有的 remember 存储会丢失,从而重置状态。

所以 Jetpack 提供了 rememberSaveable 来解决这个问题, 它内部使用 Bundle 来缓存状态,使得在配置更改后,依然能够保持状态, 就像 Activity 的 onSaveInstanceState 一样, 使用方法也很简单:

var name: String by rememberSaveable  mutableStateOf("rikka") 

3. 状态提升

根据上面所述, 可组合项是分为有状态的,和没有状态的。

这会有一个问题: 有状态的可组合项,虽然可以变化,但是不易被其它地方复用,也更加难测试,这有点像纯函数和非纯函数的区别了。

而 Compose 提出了一种“状态提升”的概念,将带有状态的可组合项分成两个可组合项:

  • 可组合项 A
    一般情况下存储两个参数:
    ①:value: T, 即当前状态
    ②:onValueChange: (T) -> Unit ,状态改变时的回调,建议 T 是新值
    将两个调用可组合项 B
  • 可组合项 B:
    valueonValueChange 这些状态信息做为参数,自己避免存储状态, 即状态就是自己的状态

例如这是一个带状态的可组合项:

@Composable
fun HelloContent() 
    Column(modifier = Modifier.padding(16.dp)) 
        var name by rememberSaveable  mutableStateOf("rikka")  // 1. 状态
        
        if (name.isNotEmpty()) 
            Text(
                text = "Hello, $name!",
                modifier = Modifier.padding(bottom = 8.dp),
                style = MaterialTheme.typography.h5
            )
        
        OutlinedTextField(
            value = name,
            onValueChange =  name = it ,  // 2. 状态改变的回调
            label =  Text("Name") 
        )
    

由于注释1、2 的存在, HelloContent 函数不好测试和复用,所以这里使用状态提升,优化后的代码如下所示:

// 可组合项 A
@Composable
fun HelloContent() 
    var name by rememberSaveable  mutableStateOf("") 
    HelloContent(name = name, onNameChange =  name = it )


// 可组合项 B
@Composable
fun HelloContent(name: String, onNameChange: (String) -> Unit) 
    Column(modifier = Modifier.padding(16.dp)) 
        Text(
            text = "Hello, $name",
            modifier = Modifier.padding(bottom = 8.dp),
            style = MaterialTheme.typography.h5
        )
        OutlinedTextField(
            value = name,
            onValueChange = onNameChange,
            label =  Text("Name") 
        )
    

上面代码中,可组合项 A 就是把状态“提上来”的函数。 可组合项B更加容易被复用和测试。

状态提升,往好的说就是拆出一个纯函数、提高UI或状态的复用度(解耦了), 往不好的说就不过就是重载、化简为繁。

如果你认为你的可组合项、状态不会被复用,或者至少短时间内不会被其他人使用,也没有做状态提升的必要性。

4. 状态容器

我们可以使用可组合项来存储状态,就和上面讲到的那样。

但是在更为复杂的情况下,例如有多个不同来源的状态的场景,仅仅是使用状态提升,可读性不会这么好,而且难以符合单一可信原则,所以 Compose 又提供了额外两种解决方案:

  1. 构建普通状态容器
    构建一个数据类和可组合项,用于委托一个可组合项所有的状态和逻辑 (属于状态提升的升级版)
  2. 把状态移到 ViewModel 中去
    使用 ViewModel 和额外的数据类, 来委托页面级的 UI 所有的状态和逻辑

上面两者的区别是:
普通状态容器管理的 UI 是小的、微观的,仅仅针对一个可组合项;
而 ViewModel 管理的 UI 则是大的、宏观的,可能针对 n 个可组合项的, 其次,它的生命周期更长一点。

4.1 构建普通状态容器

例如,我们的一个 MyApp 的可组合项:

@Composable
fun MyApp() 
    ComposeTheme 
        val scaffoldState = rememberScaffoldState()  // 1
        val shouldShowBottomBar = shouldShowBottomBar()  //2

        Scaffold(
            scaffoldState = scaffoldState,
            bottomBar = 
                if (shouldShowBottomBar) 
                    BottomBar(
                        tabs = BTTOM_BARS_TAB,  // 3
                        navigateToRoute = 
                            navigateToBottomBarRoute(it)  // 4
                        
                    )
                
            
        ) 
            NavHost(navController = navController, "initial")  /* ... */  // 5
        
    

在上面可组合项 MyApp,有着注释1、2、3 处的状态,和注释4、5处的行为逻辑, 很明显,使用状态提升也挺麻烦,可读性不好,看起来很绕,因为提升后的函数可能会有5个参数。

下面来构建普通状态容器,我们先是构建一个数据类,专门存放 MyApp 所有的UI状态和行为:

class MyAppState(
    val scaffoldState: ScaffoldState,
    val navController: NavHostController,
    /* ... */
) 
    val bottomBarTabs = ... 

    val shouldShowBottomBar: Boolean
        get() = /* ... */

    fun navigateToBottomBarRoute(route: String)  /* ... */ 

接下来,使用 rember Api ,给该数据类赋予在可组合项中存储的能力:

@Composable
fun rememberMyAppState(
    scaffoldState: ScaffoldState = rememberScaffoldState(),
    navController: NavHostController = rememberNavController(),
    /* ... */
) = remember(scaffoldState, navController, /* ... */) 
    MyAppState(scaffoldState, navController, /* ... */)

最后优化 MyApp

@Composable
fun MyApp() 
    MyTheme 
        val myAppState = rememberMyAppState()
        Scaffold(
            scaffoldState = myAppState.scaffoldState,
            bottomBar = 
                if (myAppState.shouldShowBottomBar) 
                    BottomBar(
                        tabs = myAppState.bottomBarTabs,
                        navigateToRoute = 
                            myAppState.navigateToBottomBarRoute(it)
                        
                    )
                
            
        ) 
            NavHost(navController = myAppState.navController, "initial")  /* ... */ 
        
    

优化后的 MyApp 注重于 UI 的构建,所有的状态和行为都委托给了 MyAppState,通过和 rememberMyAppState 配套,解耦了UI和逻辑。

4.2 ViewModel

ViewModel 因为其本身的特性,所以也是一个存储页面状态和逻辑的好容器。 它更适合存储屏幕级的状态和逻辑(宏观的),例如 UiState

举个例子, 我们有下面的 UiState,用于表示页面状态:

data class ExampleUiState(
    val dataToDisplayOnScreen: List<Example> = emptyList(),
    val userMessages: List<Message> = emptyList(),
    val loading: Boolean = false
)

那么在 ViewModel 中可以这样写:

class ExampleViewModel(
    private val repository: MyRepository,
    private val savedState: SavedStateHandle
) : ViewModel() 

    var uiState by mutableStateOf(ExampleUiState())  // 这里无论是 LiveData、Flow 还是 Rx,都可以转化成 MutableState
        private set

    // Business logic
    fun somethingRelatedToBusinessLogic()  /* ... */ 

最后 UI 层的使用:

@Composable
fun ExampleScreen(viewModel: ExampleViewModel = viewModel()) 
    val uiState = viewModel.uiState
    /* ... */

    ExampleReusableComponent(
        someData = uiState.dataToDisplayOnScreen,
        onDoSomething =  viewModel.somethingRelatedToBusinessLogic() 
    )


@Composable
fun ExampleReusableComponent(someData: Any, onDoSomething: () -> Unit) 
    /* ... */
    Button(onClick = onDoSomething) 
        Text("Do something")
    

5. 总结

  • Compose 的可组合项是可以带有状态和行为的,为了更新 UI,就要以不同的状态(参数)去重新调用一边可组合项
  • 为了方便让我们 改变状态 触发 改变UI, Compose 提供了 remember api 和 MutableState,两者的联动,可以让我们轻松的构造可观察状态,即像 MVVM 那样, ViewModel 的变化可以(自动)更新 V 层
  • remember 提供了一些 api,可以帮助 Android MVVM 架构更好地和 Compose 结合, 例如提供把 Flow、 LiveData、Rx 转化成 MutableState 的能力
  • Compose 有四种可组合项状态管理的方式
    躺平型: 所有的 状态、逻辑都放在其可组合项里, 这会导致可组合项臃肿、 可读性低、复用能力差
    状态提升: 将所有的状态、逻辑放在一个可组合项A中,去调用可组合项B, 可组合项B的状态、行为就是其参数。 这样的话, 可组合项B就是无状态、可复用的了, 而状态、行为的管理放在了可组合项 A 中
    构建普通状态容器: 将一个可组合项所有的状态、逻辑放在一个数据类里面,通过 remember api 赋予其存储能力,这样可以管理一个有复杂状态、逻辑的可组合项
    ViewModel 管理状态:将多个可组合项所有的状态、逻辑放在一个数据类里面,通过 remember api 赋予其存储能力,相较于上面更加宏观,可以管理整个 UI 的状态,例如 UiState 属性

参考文章

官网:状态和 Jetpack Compose

以上是关于Jetpack Compose 中的状态管理的主要内容,如果未能解决你的问题,请参考以下文章

Jetpack Compose 从入门到入门

Jetpack Compose 从入门到入门

Jetpack Compose 从入门到入门

Jetpack Compose 中的作用域状态

Jetpack Compose中的state核心思想

Jetpack Compose 与 Material You 常见问题解答