Jetpack ComposeのTextFieldのフォーカスの状態を取得する

FocusRequesterとModifier.focusRequester()を組み合わせると、フォーカスの変更を取得できます。

val focusRequester = remember { FocusRequester() }
TextField(
    modifier = Modifier
        //フォーカスの変更を受け取れるようにします
        .focusRequester(focusRequester)
        //フォーカスの変更を受け取ります
        .onFocusChanged {
            //フォーカスがキャプチャされているときはtrue
            if (it.isCaptured) Log.d("FOCUS", "isCaptured")
            //コンポーネントがフォーカスされている場合はtrue
            if (it.isFocused) Log.d("FOCUS", "isFocused")
        }
)

サンプルコード

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainContent()
        }
    }
}

@Composable
fun MainContent() {
    var text1 by remember { mutableStateOf("") }
    var text2 by remember { mutableStateOf("") }
    var text3 by remember { mutableStateOf("") }
    val focusRequester = remember { FocusRequester() }
    var backgroundColor by remember { mutableStateOf(Transparent) }
    Column {
        TextField(value = text1, onValueChange = { text1 = it })
        TextField(value = text2, onValueChange = { text2 = it },
            modifier = Modifier
                .background(color = backgroundColor)
                .focusRequester(focusRequester)
                .onFocusChanged {
                    Log.d("FOCUS", "onFocusChanged")
                    if (it.isCaptured) Log.d("FOCUS", "isCaptured")
                    if (it.isFocused) Log.d("FOCUS", "isFocused")
                    backgroundColor = if (it.isFocused) Yellow else Transparent
                }
        )
        TextField(value = text3, onValueChange = { text3 = it })
    }
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください