iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Mobile Development

Jetpack Compose系列 第 3

[Day3] Jetpack Compose: 為什麼這個EditText不會動?

今天跑去面試新工作和準備下一階段面試,十一點才想到要寫,所以就意思意思一下XD,之後會回來補齊的QQ


用XML寫過Android UI的人應該知道EditText這個東西,他可以提供使用者輸入文字,並且即時顯示出來,那Jetpack Compose裡面的EditText是什麼東西呢?

TextField

TextField在Jetpack Compose中使用起來跟EditText很像,都是提供給使用者的輸入框,差別在於,使用TextField我們有兩個變數需要處理,一個是value,負責表示要顯示的內容,另一個是onValueChange,則是當使用者更新內容的時候,會執行的程式碼:

TextField(
    value = "text",
    onValueChange = {
        
    },
)

執行之後你會發現不管怎麼按怎麼打,這個Textfield只會顯示"text"這個字串,因為我們沒有在onValueChange做任何事情,為了讓他的內容會變,首先我們先宣告一個變數:

private var text : String = "";

再來我們再onValueChange更新我們的text

TextField(
    value = text,
    onValueChange = {
        text = it
    },
)

在執行一次就會發現,他還是不會動!!!

為什麼呢? 這就牽扯到Jetpack Compose中使用到的狀態!

MutableState

MutableState是Jetpack Compose提供給使用者儲存狀態的一個interface:

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

其中value存的值就是我們要存入的狀態,他其實就是一個可觀察介面,所以如果要使用LiveData
和Flow也是可以的,而官網也建議了三種等價的宣告方式:

val mutableState = remember { mutableStateOf(default) }
var value by remember { mutableStateOf(default) }
val (value, setValue) = remember { mutableStateOf(default) }

那這裡我們就簡單宣告一個mutableState就好,注意composable的語法和一般kotlin的語法不一樣,所以宣告的部分建議寫在@composable裡面

val mutableState = remember { mutableStateOf("") }
// A surface container using the 'background' color from the theme
TextField(

    value = mutableState.value,
    onValueChange = {
        mutableState.value = it
    },
)

於是他就動了~~~


上一篇
[Day2] Jetpack Compose: UI要怎麼排列?
下一篇
[Day4] Jetpack Compose: 要如何讓元件和我們來點互動?
系列文
Jetpack Compose4

尚未有邦友留言

立即登入留言