如何在可见键盘顶部显示可组合项？

Question

由于我们有不同的屏幕尺寸和分辨率，我想在展开的键盘顶部放置一个可组合项：

键盘（见上图）是可见的，我想显示另一个可组合项（红色方块），例如消息几秒钟。

使用 Jetpack Compose 定位红色可组合项的简单方法是什么？

Answer 1

这个问题可以解决，WindowInsets.isImeVisible但是要返回正确的值，您应该设置

    WindowCompat.setDecorFitsSystemWindows(window, false)

我之前在 Activity 中设置过这个setContent{}

用于WindowInsets.isImeVisible检查键盘是否打开。

我们需要在键盘打开时显示消息，所以

val offsetY = WindowInsets.ime.getBottom(density)
var previousOffset by remember { mutableStateOf(0) }

val isKeyboardGoingDown by remember(offsetY) {
    derivedStateOf {
        val isGoingDown = previousOffset - offsetY > 0
        previousOffset = offsetY
        isGoingDown
    }
}

用于通过 LaunchedEffect 跟踪键盘是向上还是向下

LaunchedEffect(key1 = isImeVisible, key2 = isKeyboardGoingDown) {

    if (isImeVisible && !isKeyboardGoingDown) {
        showMessage = true
        delay(1000)
        showMessage = false
    } else {
        showMessage = false

    }
}

全面实施

@OptIn(ExperimentalLayoutApi::class)
@Composable
private fun TimedMessageLayout() {

    val isImeVisible = WindowInsets.isImeVisible
    var showMessage by remember { mutableStateOf(false) }
    val density = LocalDensity.current
    val offsetY = WindowInsets.ime.getBottom(density)
    var previousOffset by remember { mutableStateOf(0) }
    
    val isKeyboardGoingDown by remember(offsetY) {
        derivedStateOf {
            val isGoingDown = previousOffset - offsetY > 0
            previousOffset = offsetY
            isGoingDown
        }
    }

    LaunchedEffect(key1 = isImeVisible, key2 = isKeyboardGoingDown) {

        if (isImeVisible && !isKeyboardGoingDown) {
            showMessage = true
            delay(1000)
            showMessage = false
        } else {
            showMessage = false

        }
    }

    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomStart) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(WindowInsets.systemBars.asPaddingValues())
                .border(2.dp, Color.Green)
        ) {
            Image(
                modifier = Modifier
                    .fillMaxWidth()
                    .aspectRatio(4 / 3f),
                painter = painterResource(id = R.drawable.landscape1),
                contentDescription = null
            )

            var text by remember { mutableStateOf("") }

            Text(
                "Ime visible: ${WindowInsets.isImeVisible}, isKeyboardGoingDown: $isKeyboardGoingDown\n" +
                        "ime bottom: ${WindowInsets.ime.getBottom(density)}\n"
            )
            Spacer(modifier = Modifier.weight(1f))
            TextField(
                value = text,
                onValueChange = { text = it }
            )
        }

        if (showMessage && !isKeyboardGoingDown && offsetY != 0) {
            Box(modifier = Modifier
                .offset {
                    IntOffset(0, -offsetY)
                }
                .fillMaxWidth()
                .height(200.dp)
                .border(3.dp, Color.Red))
        }
    }
}

结果

Answer 2

从这里尝试这个解决方案，我稍作修改

@Composable
fun keyboardHeightAsState(): State<Int> {
    val keyboardHeight = remember { mutableStateOf(0) }
    val view = LocalView.current
    DisposableEffect(view) {
        val onGlobalListener = ViewTreeObserver.OnGlobalLayoutListener {
            val rect = Rect()
            view.getWindowVisibleDisplayFrame(rect)
            val screenHeight = view.rootView.height
            val keypadHeight = screenHeight - rect.bottom
            keyboardHeight.value = if (keypadHeight > screenHeight * 0.15) {
                keypadHeight
            } else {
                0
            }
        }
    }

    return keyboardHeight
}

但我还是有一点小小的差别。我猜它是顶部的栏，我必须减去它