たくさんの自由帳

Jetpack Composeでも背景押したらTextFieldのフォーカスを外す

投稿日 : | 0 日前

文字数(だいたい) : 2581

#DroidKaigiの荷物届きました。ドロイド君かわいい

Android Developersのシール、貴重では

コード

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ReleaseTextFieldFocusTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {

                    // 親コンポーネントにフォーカスを移動させるのに使う
                    val focusRequester = remember { FocusRequester() }
                    val interactionSource = remember { MutableInteractionSource() }

                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .clickable(
                                interactionSource = interactionSource,
                                enabled = true,
                                indication = null,
                                onClick = { focusRequester.requestFocus() } // 押したら外す
                            )
                            .focusRequester(focusRequester) // フォーカス操作するやつをセット
                            .focusTarget(), // フォーカス当たるように
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {

                        val text = remember { mutableStateOf("") }

                        OutlinedTextField(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(10.dp),
                            value = text.value,
                            label = { Text(text = "フォーカス外すサンプル") },
                            onValueChange = { text.value = it }
                        )

                    }

                }
            }
        }
    }
}

Modifier.clickable()の引数が多い理由はRipple効果を無くすためです。
以上です。お疲れさまでした。