主页 / coding / 问题 / 79225269
Accepted
Raphael
Asked: 2024-11-26 11:48:01 +0800 CST

如何为 adjustResize / imePadding 设置偏移量？

  • 772

He||o，使用 Kotlin 和 Compose，我在 Box 中创建了一个列，并android:windowSoftInputMode="adjustResize"在清单文件中使用

列的修饰符使用.align(Alignment.BottomCenter)和.offset(y = (-110).dp)，它看起来像这样：

没有键盘

列的修饰符也使用.imePadding()，当键盘显示时它看起来像这样：

显示键盘

是否有某种方法可以使用一些偏移量，以便当键盘出现时，列会降低？

因此登录按钮和键盘之间没有空格

1 个回答

  1. Best Answer

    Modifier.imePadding()只是根据键盘高度变化的填充。如果按钮之间有 100.dp 的空间，则当键盘打开时它仍然是 100.dp。

    正如问题中提到的那样，您需要有一个不会改变父级位置的layout或修饰符，在 OP 的情况下没有兄弟，但偏移量不会像填充那样改变兄弟的位置，因此它可以工作，不像因为当没有空间时填充不会按预期工作但它可以按预期工作，因为它是一个填充修饰符。offsetimePadding

    在此处输入图片描述

    首先你需要设置

    WindowCompat.setDecorFitsSystemWindows(window, false)

    能够获得键盘尺寸

    val density = LocalDensity.current
val imeBottom = WindowInsets.ime.getBottom(density)

    创建一个offset随键盘高度变化的修改器

    fun Modifier.imeOffset(contentBottom: Int = 0) = composed {
    val density = LocalDensity.current
    val imeBottom = WindowInsets.ime.getBottom(density)
    val navBarBottom = WindowInsets.navigationBars.getBottom(density)
    Modifier.offset {
        IntOffset(
            x =0,
            y = (-imeBottom + contentBottom + navBarBottom)
                .coerceAtMost(0)
        )
    }
}

    contentBottom 是 Composable 的底部位置，此 Modifier 将分配给该位置，其计算方式如下

    .onPlaced {
    val parentHeight = it.parentLayoutCoordinates?.size?.height ?: 0
    bottom = (parentHeight - it.boundsInParent().bottom.toInt())
}

    演示

    @Composable
private fun ImeOffsetSample() {
    var bottom by remember {
        mutableIntStateOf(0)
    }

    Box(
        modifier = Modifier.fillMaxSize()
            .systemBarsPadding()
            .border(2.dp, Color.Red),
        contentAlignment = Alignment.Center
    ) {
        Column(
            modifier = Modifier
                .offset(y = (150).dp)
                .onPlaced {
                    if (bottom == 0) {
                        val parentHeight = it.parentLayoutCoordinates?.size?.height ?: 0
                        bottom = (parentHeight - it.boundsInParent().bottom.toInt())
                            .coerceAtLeast(0)
                    }
                }
                .imeOffset(bottom)
                .border(2.dp, Color.Black)
                .fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {

            var email by remember {
                mutableStateOf("")
            }

            var password by remember {
                mutableStateOf("")
            }

            TextField(
                value = email,
                onValueChange = { email = it },
                label = { Text("email") }
            )

            TextField(
                value = password,
                onValueChange = { password = it },
                label = { Text("password") }
            )

            Button(
                onClick = {}
            ) {
                Text("Login")
            }
        }
    }
}

    另一个示例是，在要分配 imeOffset 的子项上方有一个包含其他 Composble 的 Column。在这种情况下，padding 会缩小最后一个 Compoasble（Column 中的 TextField 和 Button），因为空间量是 Column 高度 - imePadding，不足以容纳最后一个可组合项。

    在此处输入图片描述

    即使整个 Composable 都被其他同级 Composable 填充，按钮和 TextField 也可以移到键盘上方。

    @Composable
private fun ImeOffsetSample() {
    var bottom by remember {
        mutableIntStateOf(0)
    }

    Column(
        modifier = Modifier.fillMaxSize().systemBarsPadding()
    ) {

        TopAppBar(
            title = {
                Text("TopAppbar")
            }
        )
        Column(
            modifier = Modifier.padding(horizontal = 16.dp)
        ) {
            Spacer(Modifier.height(16.dp))

            repeat(4) {
                SomeComposable()
                Spacer(Modifier.height(16.dp))
            }

            repeat(7) {
                Text("Some Text")
                Spacer(Modifier.height(16.dp))
            }

            Spacer(Modifier.weight(1f))

            Column(
                modifier = Modifier
                    .onPlaced {
                        if (bottom == 0) {
                            val parentHeight = it.parentLayoutCoordinates?.size?.height ?: 0
                            bottom = (parentHeight - it.boundsInParent().bottom.toInt())
                                .coerceAtLeast(0)

                            println("Parent height: $parentHeight, bottom: $bottom")
                        }
                    }
                    .imeOffset(bottom)
                    .fillMaxWidth()
                    .background(Color.White)
            ) {
                SomeComposable()
                Spacer(Modifier.height(16.dp))

                Button(
                    modifier = Modifier

                        .fillMaxWidth()
                        .background(Color.White)
                        .padding(bottom = 16.dp),
                    onClick = {}
                ) {
                    Text("Login")
                }
            }
        }
    }
}

@Composable
fun SomeComposable() {
    var text by remember {
        mutableStateOf("")
    }

    TextField(
        modifier = Modifier.fillMaxWidth(),
        value = text,
        onValueChange = { text = it },
        label = { Text("text") }
    )
}
    • 0

相关问题