新兴的bottomBar与textField jetpack compose重叠

Question

当用户在文本字段中输入内容时，我想显示一个带有按钮的底部栏，但屏幕上出现的底部栏与文本字段重叠。我该如何解决这个问题？

@Preview
@Composable
fun EditContent() {
    var text by remember { mutableStateOf("") }
    Scaffold(
        bottomBar = {
            if (text.isNotEmpty()) {
                Box(
                    modifier = Modifier
                        .background(Color.White)
                        .padding(horizontal = 16.dp)
                        .padding(top = 12.dp)
                ) {
                    Button(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = 12.dp),
                        onClick = { }
                    ) {
                        Text(text = "Save")
                    }
                }
            }
        }
    ) { scaffoldPadding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(scaffoldPadding)
                .padding(horizontal = 16.dp)
        ) {
            Spacer(modifier = Modifier.height(1000.dp))
            TextField(
                value = text,
                onValueChange = { text = it }
            )
        }
    }
}

Answer 1

将

android:windowSoftInputMode="adjustResize"

添加到您的活动清单中，以确保活动窗口可以正确调整大小：

<activity
    android:name=".MainActivity"
    android:windowSoftInputMode="adjustResize">

然后对代码进行轻微更改：

1. 对底部栏使用

   imePadding()

   和

   systemBarsPadding()

   以确保其正确显示。
2. 将

   Spacer(modifier = Modifier.height(1000.dp))

   替换为

   Spacer(modifier = Modifier.weight(weight = 1f))

   。这将使垫片填充所有空白高度，而不是固定的

   1000.dp

   。

@Preview
@Composable
fun EditContent() {
    var text by remember { mutableStateOf("") }
    Scaffold(
        bottomBar = {
            if (text.isNotEmpty()) {
                Box(
                    modifier = Modifier
                        .background(Color.White)
                        .padding(horizontal = 16.dp)
                        .padding(top = 12.dp)
                        .imePadding()
                        .systemBarsPadding()
                ) {
                    Button(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = 12.dp),
                        onClick = { }
                    ) {
                        Text(text = "Save")
                    }
                }
            }
        }
    ) { scaffoldPadding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(scaffoldPadding)
                .padding(horizontal = 16.dp)
        ) {

            Spacer(modifier = Modifier.weight(weight = 1f))

            TextField(
                value = text,
                onValueChange = { text = it }
            )
        }
    }
}

Answer 2

<activity
android:name=".MainActivity"
android:windowSoftInputMode="adjustPan">

或

<activity
android:name=".MainActivity"
android:windowSoftInputMode="adjustResize">

在清单文件中尝试此代码。