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 中的狀態簡介