IME 打开时 Jetpack Compose 布局会跳转

Question

所以我有这个 BottomSheetScaffold 布局，带有 CenterAlignedTopAppBar 和带有一些文本字段的底部工作表。

以下是我认为可能有用的修饰符：

// root composable, NavHost modifier
Modifier.fillMaxSize().imePadding()

// screen-level composable, BottomSheetScaffold
Modifier.fillMaxSize()

// modifier for a content column inside the BottomSheetScaffold
Modifier.padding(paddingValues).fillMaxSize()

因此，当我单击底部工作表内的文本字段时，整个布局会发生可怕的转变（我猜它试图执行某种动画），然后调整大小到适当的尺寸。 这是视频演示

有办法避免这种情况吗？

我尝试将

android:windowSoftInputMode

设置为所有不同类型的值，例如 adjustmentPan、adjustResize、adjustNothing，但这不起作用。

还尝试将

android:animateLayoutChanges

设置为 false，但这也不起作用。

我也尝试将

imePadding

修饰符应用于布局的不同部分，但除非它在 NavHost 上，否则填充很奇怪且不合适，所以我认为 NavHost （或您的活动中的任何其他顶级可组合项）确实是放置此修饰符的正确位置

Answer 1

当

android:windowSoftInputMode="adjustUnspecified"

或默认设置时，键盘动画与最终达到的最大空间不同步。视图或可组合项比键盘运行得更快。

https://developer.android.com/develop/ui/views/layout/sw-keyboard

在 windowSoftInputMode 为

adjustNothing

或

adjustPan

时，如果它低于键盘的最大高度并且有这个糟糕的动画，它会将所有内容向上推以显示 TextField，但是当您使用

android:windowSoftInputMode="adjustResize"

时，动画会更平滑，但不会推动

 TextField

向上。这很容易克服：

Modifier.imePadding()

 或根据 sw 键盘的当前高度设置偏移量。

Modifier.imePadding

的问题在于它的工作原理。人们的误解，包括我在彻底测试键盘之前，都认为神奇地将您的可组合项推到键盘上方，但事实并非如此。

它将填充添加到分配给它的可组合项的底部。如果需要缩小空间，例如 Spacer(weight(1f))，则效果最好，就像在 Composable 中一样，因此它可以在底部向 Composable 添加填充，同时缩小其上方的空间。在视图中，如果您检查 adjustmentResize 如何与视图配合使用，他们会将其与锚定到底部的约束布局 EditText 一起使用。

但是，如果它上面有任何可组合项，它只会添加填充底部，或者可能根本不执行任何操作。您可以将此视为向最后一项添加填充，或者如果将其分配给父级，则添加父级的底部。

与

android:windowSoftInputMode="adjustResize"

Column(
    modifier = Modifier
        .systemBarsPadding()
        .imePadding()
) {
    var text by remember {
        mutableStateOf("")
    }

    TopAppBar(
        modifier = Modifier.fillMaxWidth(),
        title = {
            Text("TopAppbar")
        }
    )

    // Comment this line and comment repeat block to see difference
    repeat(10) {
        Text(
            text = "Text: $it",
            fontSize = 16.sp,
            modifier = Modifier.padding(16.dp)
        )
    }

   Column {
       Spacer(Modifier.weight(1f))
       TextField(text, onValueChange = { text = it })
       Text("Bottom Text")
   }
}

如果您评论重复块

这个修饰符实际上应该是

Modifier.offset

 才能在每个布局中正常工作，因为设置偏移量不会推动同级。制作起来很容易，但你需要设置 

WindowCompat.setDecorFitsSystemWindows(window, false)

 才能获取当前的键盘高度。

val density = LocalDensity.current
val bottom: Int = WindowInsets.ime.getBottom(density)
val bottomDp: Dp = with(density) { bottom.toDp() }

当您不使用 BottomSheets 时，在 Composable 下面添加偏移或填充是可行的，因为它具有 peekHeight。在OP的情况下，更精确的解决方案需要可重复的示例。