Question

当键盘出现时对话框向上移动。我想要一个 Composable 做同样的事情，但我找不到如何做到这一点。

Answer 1

好的，我找到了答案。首先，在清单中：

<activity
            
            android:windowSoftInputMode="adjustResize">

之后使用“Insets”，在本页中解释：

https://google.github.io/accompanist/insets/

在下面的示例中，我使用了一个 fab，它使文本字段出现在键盘上方

PD：注意在 FloatingActionButton 中我使用了 Modifier.systemBarsPadding()，它是为了不隐藏

class MainActivity : ComponentActivity() {
    @ExperimentalAnimatedInsets
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)


        setContent {
            MyApplicationTheme {
                ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {

                    val focusRequester = FocusRequester()
                    Greeting(focusRequester)
                }

            }
        }
    }
}


@ExperimentalAnimatedInsets
@Composable
fun Greeting(focusRequester: FocusRequester) {


    var creatorVisibility by remember{ mutableStateOf(false)}

    ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
        Scaffold(floatingActionButton = {
            Fab(onClick = { creatorVisibility = true }, creatorVisibility = creatorVisibility)}
        ) {

            ConstraintLayout(constraintSet = constraints, modifier = Modifier.fillMaxSize(1f)) {


                TextField(
                    value = TextFieldValue(),
                    onValueChange = { /*TODO*/ },
                    modifier = Modifier.layoutId("mainTf")
                )



                if (creatorVisibility){

                    Box(
                        modifier = Modifier
                            .fillMaxSize()
                            .clickable {
                                creatorVisibility = false
                            }
                            .background(color = Color(0f, 0f, 0f, 0.5f))
                        ,contentAlignment = Alignment.BottomCenter
                    ) {
                        SideEffect(effect = { focusRequester.requestFocus() })

                        TextField(colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.White),
                            value = TextFieldValue(),
                            onValueChange = { /*TODO*/ },
                            modifier = Modifier
                                .layoutId("textField")
                                .imePadding()
                                .focusRequester(focusRequester = focusRequester)

                        )
                    }
                }
            }
        }
    }
}


@Composable
fun Fab(onClick : () -> Unit, creatorVisibility:Boolean){
    if (!creatorVisibility){
        FloatingActionButton(
            onClick = { onClick() }, 
            modifier = Modifier.layoutId("fab").systemBarsPadding()
        ) {
            Text(text = "Crear tarea", modifier = Modifier.padding(start = 10.dp, end = 10.dp))
        }
    }

}

val constraints = ConstraintSet {
    val textField = createRefFor("textField")
    val mainTf = createRefFor("mainTf")
    val fab = createRefFor("fab")

    constrain(textField){
        start.linkTo(parent.start)
        end.linkTo(parent.end)
        bottom.linkTo(parent.bottom)
    }
    constrain(mainTf){
        start.linkTo(parent.start)
        end.linkTo(parent.end)
        top.linkTo(parent.top)
        bottom.linkTo(parent.bottom)

    }

    constrain(fab){
        end.linkTo(parent.end)
        bottom.linkTo(parent.bottom)
    }
}

如何参考 Jetpack Compose 中的键盘视图？

1 个答案: