iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0
Mobile Development

現代Android jetpack compose開發入門系列 第 8

Day 8:直覺化的UI體驗,使用Ime與Keyboard功能

  • 分享至 

  • xImage
  •  

上一篇提到了更多輸入UI的功能,這篇會是更進階的功能以及一些其他的compose特性

更多Compose功能

這是一段範例程式碼,用到了FocusRequester和LaunchedEffect

val focusRequester = remember { FocusRequester() }  
LaunchedEffect(shouldFocus) {  
    if (shouldFocus) {  
        focusRequester.requestFocus()  
        releaseFlag()  
    }  
}

LaunchedEffect

這是一個很好用的功能,有時候你想要在某個數值變化的時候做出相應UI變化,這時候,只要你傳入的shouldFocus(Key)變了,他就會觸發
LaunchedEffect 是 Compose 的 Side-effect API,適合用來啟動需要隨狀態變化而觸發的一次性工作(像是初始化、動畫、或請求焦點)。

FocusRequester

這個功能能夠讓鍵盤在指定輸入框冒出來,不用特別去操作
使用方法:

步驟 說明
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 = KeyboardOptions.Default.copy(  
	imeAction = if (i != 3) ImeAction.Next  
	else ImeAction.Done,  
	keyboardType = KeyboardType.Number,  
)

keyboardOptions有很多屬性,因為我只要更改兩個所以用copy

  • ImeAction:讓輸入按下enter時的反應,Next->下一格,Done->標示完成
  • keyboardType:讓使用者鍵盤是數字或是文字等

KeyboardActions

ImeAction有很多類別,keyboardAction可以監測這些變化

keyboardActions = KeyboardActions(onDone = { submit() })

流程:
輸入框 → ImeAction.Next → 跳到下一格
輸入框 → ImeAction.Done → 觸發 onDone { ... }

.then()

這是一個神奇的技巧,他可以讓兩個modifier接在一起,像是modifierA.then(modifierB)
由於Kotlin自帶的特性,我通常將它當作條件式modifier使用
雖然可以用 if (...) Modifier.focusRequester(...) else Modifier 直接寫在 Modifier 裡,但 .then() 讓多個 Modifier 組合更清晰,也能動態拼接。

.then(if (i == 0) Modifier.focusRequester(focusRequester) else Modifier)

在第一格輸入取得鍵盤注意,其他沒變

這篇的內容比較進階,雖然不是每個專案都會用到,但它們能讓你的輸入體驗更順暢。特別是 LaunchedEffect,在初始化或需要觸發一次性事件時,常常會派上用場。


上一篇
Day 7:狀態儲存,能保留狀態的輸入框
系列文
現代Android jetpack compose開發入門8
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言