Jetpack Compose學習(8)——State及remeber

原文地址: Jetpack Compose學習(8)——State狀態及remeber關鍵字 - Stars-One的雜貨小窩

之前我們使用TextField,使用到了兩個關鍵字remember和mutableStateOf,這兩個是做什麼用的呢?本篇特來補充說明下

mutableStateOf

之前也說過,compose是MVVM模式的一種實現,UI界面依賴數據,數據改變即改變UI

這裡需要去監聽數據,當數據發生改變才會觸發UI渲染,改變UI

Android官方將上面這種情況稱之為重組,我個人理解覺得重新渲染這個詞更好說明

由於數據變化監聽邏輯複雜,顯然不應該由我們開發者去完成,所以Android官方特地封裝好了相應的類供我們使用,便於快速開發,於是就是輪到今天的主角State

從官方的文檔說明,State是一個介面,MutableState則是實現了State的一個介面

我們只需要每次創建MutableState對象使用即可,而創建對象的方法Android官方團隊也是為我們提供了一個方法,即mutableStateOf()

fun <T : Any?> mutableStateOf(
    value: T,
    policy: SnapshotMutationPolicy<T> = structuralEqualityPolicy()
): MutableState<T>

本質上，mutableStateOf()方法相當於提供了包裝類的功能，裡面可包裝任意類型的數值，這裡為了方便下文講解，將T稱為數值類型

此方法接收兩個參數,value和policy

• value 任意數值
• policy 策略,有三種選擇,分別為referentialEqualityPolicy structuralEqualityPolicy neverEqualPolicy

三種的策略說明如下:

• referentialEqualityPolicy 引用相等策略
• structuralEqualityPolicy 數值相等策略（預設）
• neverEqualPolicy 從不相等策略

上面也是說了，當數據發生改變才會觸發重組，那麼，怎麼樣才算數據發生改變呢？於是便是有了以上的三種選擇

• 引用相等策略：當數值類型T為對象，State設置新的對象，若是引用相等，則不會觸發重組
• 數值相等策略：當數值類型T為基本數據類型，State設置新數值，若是數值相等，則不會觸發重組
• 從不相等策略：State設置新的對象，不管引用或數值是否相等，一定會會觸發重組

個人覺得引用相等和數值相等策略主要是為了優化頻繁觸發重組帶來的性能問題，當然，也提供了一個不優化的選項（從不相等策略）

remember

使用remember和上述的mutableStateOf方法,我們可以創建一個變數,此變數如果是在compose中使用,更改變數數值即可達到更改UI的作用

//mutableState是State<String>對象
val mutableState = remember { mutableStateOf("") } 

//value是String對象
var value by remember { mutableStateOf("") } 

之前一文Kotlin學習快速入門（8）—— 屬性委托 - Stars-One的雜貨小窩，也是講解了Kotlin中的委托功能，這裡的by就是使用了委托，value的get和set方法委托給了State<String>

所以我們直接對value調用get和set方法，其實都是在調用State<String>對象的get和set方法

將某些狀態轉為State

在compose中,某些類提供有轉為State的方法,方便我們開發時候將其與UI綁定,從而實現動態改變UI的效果

如之前有講解到的按鈕(Button)的按壓狀態MutableInteractionSource,提供了三個方法來獲取不同的State

• collectIsPressedAsState 按壓狀態
• collectIsDraggedAsState 拖動狀態
• collectIsFocusedAsState 焦點狀態

除此之外，Compose也是考慮到了之前LiveData組件使用的數據類型，並給予一個擴展方法，可以獲得其的State類

需要引用依賴庫

implementation androidx.compose.runtime:runtime-livedata:$latestVersion

observeAsState方法 該方法的作用就是將ViewModel提供的LiveData數據轉換為Compose需要的State數據

關於LiveData的使用,可以參考這一篇Jetpack架構組件學習(2)——ViewModel和Livedata使用 - Stars-One的雜貨小窩

LiveData庫中主要是兩個類MutableLiveData和LiveData,使用observeAsState即可轉為compose中的State對象,如下麵例子:

@Composable
fun LoginPageDemo() {

    //這裡只是演示用,實際情況MutableLiveData對象是要從ViewModel中取值的!
    val mlivedate = MutableLiveData("myusername")

    //name為State<String>對象,只能讀數值,不能修改數值
    var name = mlivedate.observeAsState(initial = "")
    
    Column() {
        val focusManager = LocalFocusManager.current
        TextField(
            modifier = Modifier.fillMaxWidth(),
            value = name.value,
            placeholder = {
                Text("請輸入用戶名")
            },
            //註意這裡,修改數值要去修改MutableLiveData對象
            onValueChange = { str -> mlivedate.value = str}
        )
    }
}

PS:上面的例子比較簡單,一般LiveData是與ViewModel聯用的,MutableLiveData對象是要從ViewModel中取值的!

除了上面的LiveData,還存在響應式框架RxJava,Flow,也存在對應的轉為State的方法,但筆者用的還比較少,所以這方面各位朋友需要自己找些資料了

rememberSaveable

使用remember有個註意點,就是其是對應的生命周期是屬於Composable,當Composable被移除的時候(如出現屏幕方向由豎屏轉為橫屏),remember記住的數值也會丟失

這個時候,推薦使用的則是rememberSaveable

rememberSaveable會在Activity回調configChanges()的時候，將remember的值寫入到bundle中，然後重新構建Activity的時候，從bundle讀數據

這個關鍵字就是針對Activity出現重建的情況下進行數值的保存,不會丟失數值,使用方法也是與remember類似

val name = rememberSaveable {
    mutableStateOf("")
}

狀態提升

無狀態可組合項: 沒有狀態的可組合項，這意味著它不會保存、定義或修改新狀態。

有狀態可組合項: 具有可以隨時間變化的狀態的可組合項。

簡單來說,組合中使用 remember、rememberSaveState 方法保存狀態的組合項是有狀態組合，沒有則是無狀態組合。

一般如果涉及到組合的復用,則需要我們將組合由有狀態組合提取為無狀態組合,這就叫做狀態提升

當一個組合函數,引入了下麵兩個參數,即可說此組合其屬於有狀態組合

• value: T 形參，即要顯示的當前值。
• onValueChange: (T) -> Unit - 回調 lambda，會在值更改時觸發，以便可以在其他位置更新狀態（例如，當用戶在文本框中輸入一些文本時）

那麼什麼時候需要使用到狀態提升呢?主要有下麵兩個情況:

• 與多個可組合函數(Composable)共用狀態。
• 創建可在應用中重覆使用的無狀態可組合項。

下麵以之前登錄頁的輸入框為例,有兩個輸入框,一個是輸入用戶名,另外一個則是輸入密碼,但是我們直接是在裡面寫了兩個TextField組件

實際上兩個組件十分類似,我們可以採取狀態提升將兩個組件整成一個自定義組件,這過程則是用到了狀態提升

@Composable
fun LoginPageDemo() {

    //這裡只是演示用,實際情況MutableLiveData對象是要從ViewModel中取值的!
    val mlivedate = MutableLiveData("myusername")

    //name為State<String>對象,只能讀數值,不能修改數值
    var name = mlivedate.observeAsState(initial = "")
    
    Column() {
        InputText(
            imageVector = Icons.Default.AccountBox,
            tip = "請輸入用戶名",
            value = name,
            onValueChange = { name = it })
        InputText(
            imageVector = Icons.Default.Lock,
            tip = "請輸入密碼",
            value = pwd,
            onValueChange = { pwd = it },isPwd = true)
    }
}

@Composable
fun InputText(
    imageVector: ImageVector,
    tip: String,
    value: String,
    onValueChange: (String) -> Unit,
    isPwd: Boolean = false
) {

    val pwdVisualTransformation = PasswordVisualTransformation()
    var showPwd by remember {
        mutableStateOf(true)
    }
    val transformation = if (showPwd) pwdVisualTransformation else VisualTransformation.None

    TextField(
        modifier = Modifier.fillMaxWidth(),
        value = value,
        placeholder = {
            Text(tip)
        },
        onValueChange = onValueChange,
        colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Transparent),
        leadingIcon = {
            Icon(
                imageVector = imageVector,
                contentDescription = null
            )
        },
        //密碼相關配置
        visualTransformation = if (isPwd) transformation else VisualTransformation.None,
        trailingIcon = {
            if (isPwd) {
                if (showPwd) {
                    IconButton(onClick = { showPwd = !showPwd }) {
                        Icon(
                            painter = painterResource(id = R.drawable.eye_hide),
                            contentDescription = null,
                            Modifier.size(30.dp)
                        )
                    }
                } else {
                    IconButton(onClick = { showPwd = !showPwd }) {
                        Icon(
                            painter = painterResource(id = R.drawable.eye_show),
                            contentDescription = null,
                            Modifier.size(30.dp)
                        )
                    }
                }
            }
        },
    )
}

我們不細看代碼,從組件的輸入參數入手

fun InputText(
    imageVector: ImageVector,
    tip: String,
    value: String,
    onValueChange: (String) -> Unit,
    isPwd: Boolean = false
) {}

其中,value對應的則是TextField的數值,onValueChange則是對應的用戶輸入事件,我們將此兩個封裝到參數上,由上層進行設置

PS: 實際上,無狀態可組合項是屬於比較理想的情形。具體情形中，組合函數里還是會有使用到remember函數進行狀態的保存，如上文舉出的代碼例子

只是我們儘可能讓組合項擁有儘可能少的狀態，並能夠在必要時通過在可組合項的 API 中公開狀態來提升狀態。

InputText組合函數中,還是存在有remember進行狀態的保存,但此函數里的狀態不會被上層改變,所以也可以將其視為無組合項(即使與上面說的概念定義有所矛盾)

總結來說:

如果組合函數中存在有value: T和onValueChange: (T) -> Unit,我們可以將其視為有狀態的可組合項

當然,上面是我自己個人理解,可能不太準確,大家也可以提出意見

一般來說，狀態可能還涉及個單一信任源的問題，但筆者還未實踐，還是等之後研究到了一起講解

參考

• State  |  Android Developers
• remember  |  Android Developers
• mutableStateOf  |  Android Developers
• collectAsState |  Android Developers
• 狀態和Jetpack Compose
• Compose的State(九)
• Jetpack Compose學習之mutableStateOf與remember是什麼
• Jetpack Compose狀態管理
• Compose中的remember和mutableStateOf
• JetpackCompose之狀態管理 - 掘金
• Kotlin Compose 狀態恢復 rememberSaveable 與 remember_安果移不動的博客-CSDN博客
• Compose 中的狀態簡介