Android Jetpack Compose 文字輸入視窗 TextField

在與使用者互動中最基礎的就是文字輸入了，直接快速產生一個文字輸入視窗：

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

測試看看：

咦？怎麼沒有反應？明明有輸入但內容都沒有顯示？

看了一下文件，才發現原來要這樣寫：

  
import androidx.compose.material3.TextField
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue


var text: String by remember { mutableStateOf("Ruyut") }
TextField(
    value = text,
    onValueChange = { text = it },
)

需要宣告一個可變的字串變數，顯示此變數，當文字框內容變更時(onValueChange)，將新的內容寫入變數中。

這樣使用起來好像比以前麻煩很多，不過因為 mutableStateOf 會自動更新內容，要即時更新資訊根本不用加多少程式碼，非常方便：

  
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue


var text: String by remember { mutableStateOf("Ruyut") }
TextField(
    value = text,
    onValueChange = { text = it },
)

Text("input: $text")

設定鍵盤輸入類型

數字

  
var text: String by remember { mutableStateOf("Ruyut") }
TextField(
    value = text,
    onValueChange = { text = it },
    
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Number
    ),
)

密碼

  
var text: String by remember { mutableStateOf("Ruyut") }
TextField(
    value = text,
    onValueChange = { text = it },
    
    visualTransformation = PasswordVisualTransformation(),
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Password
    ),
)

加上提示文字

  
var text: String by remember { mutableStateOf("Ruyut") }
TextField(
    value = text,
    onValueChange = { text = it },
    
    label = { Text("請輸入你的名字") },
)

如果不喜歡 TextField 的外框的話，可以使用沒有外框的版本： BasicTextField

參考資料：
Composables - BasicTextField
Composables - TextField
Composables - From View to Composable
Android Developers - Handle user input