上一篇提到了更多輸入UI的功能,這篇會是更進階的功能以及一些其他的compose特性
這是一段範例程式碼,用到了FocusRequester和LaunchedEffect
val focusRequester = remember { FocusRequester() }
LaunchedEffect(shouldFocus) {
if (shouldFocus) {
focusRequester.requestFocus()
releaseFlag()
}
}
這是一個很好用的功能,有時候你想要在某個數值變化的時候做出相應UI變化,這時候,只要你傳入的shouldFocus(Key)變了,他就會觸發LaunchedEffect
是 Compose 的 Side-effect API,適合用來啟動需要隨狀態變化而觸發的一次性工作(像是初始化、動畫、或請求焦點)。
這個功能能夠讓鍵盤在指定輸入框冒出來,不用特別去操作
使用方法:
步驟 | 說明 |
---|---|
1. 建立 | val focusRequester = remember { FocusRequester() } |
2. 套用 | modifier.focusRequester(focusRequester) |
3. 觸發 | focusRequester.requestFocus() |
這是我寫過的一段程式,他會在第一個(0-3)輸入框自動要求輸入,並在輸入完第四個輸入框自動submit
OutlinedTextField(
keyboardOptions = KeyboardOptions.Default.copy(
imeAction = if (i != 3) ImeAction.Next
else ImeAction.Done,
keyboardType = KeyboardType.Number,
),
keyboardActions = KeyboardActions(onDone = { submit() }),
maxLines = 1,
onValueChange = {
val input = it.toIntOrNull()?:-1
func(i, input%10)
},
value = if(l[i]==-1)""
else l[i].toString(),
modifier = Modifier
.width(64.dp)
.height(64.dp)
.background(MaterialTheme.colorScheme.primaryContainer)
.border(color = MaterialTheme.colorScheme.outline, width = 2.dp)
.then(if (i == 0) Modifier.focusRequester(focusRequester) else Modifier),
textStyle = TextStyle(
fontSize = 24.sp,
textAlign = TextAlign.Center,
color = MaterialTheme.colorScheme.onPrimaryContainer
)
)
keyboardOptions = KeyboardOptions.Default.copy(
imeAction = if (i != 3) ImeAction.Next
else ImeAction.Done,
keyboardType = KeyboardType.Number,
)
keyboardOptions有很多屬性,因為我只要更改兩個所以用copy
ImeAction有很多類別,keyboardAction可以監測這些變化
keyboardActions = KeyboardActions(onDone = { submit() })
流程:
輸入框 → ImeAction.Next
→ 跳到下一格
輸入框 → ImeAction.Done
→ 觸發 onDone { ... }
這是一個神奇的技巧,他可以讓兩個modifier接在一起,像是modifierA.then(modifierB)
由於Kotlin自帶的特性,我通常將它當作條件式modifier使用
雖然可以用 if (...) Modifier.focusRequester(...) else Modifier
直接寫在 Modifier 裡,但 .then()
讓多個 Modifier 組合更清晰,也能動態拼接。
.then(if (i == 0) Modifier.focusRequester(focusRequester) else Modifier)
在第一格輸入取得鍵盤注意,其他沒變
這篇的內容比較進階,雖然不是每個專案都會用到,但它們能讓你的輸入體驗更順暢。特別是 LaunchedEffect
,在初始化或需要觸發一次性事件時,常常會派上用場。