如何刪除 Jetpack Compose OutlinedTextField 上方的額外填充？

Question

我試圖像這樣在 Box 元素之后將 OutlinedTextField 放入 Column

@Composable
fun Header() {
    Column {
        Box(
            modifier = Modifier
                .border(1.dp, Color.Cyan)
        ) {
            Text("Header")
        }

        OutlinedTextField(
            modifier = Modifier
                .fillMaxWidth()
                .border(1.dp, Color.Cyan),
            value = "",
            onValueChange = {},
            placeholder = {
                Text("Enter header")
            }
        )
    }
}

添加邊框以查看元素的確切大小。 看起來像這樣
上面有額外的 8dp 填充，但是當我使用 TextField 而不是 OutlinedTextField 時，沒有額外的空間

@Composable
fun Header() {
    Column {
        Box(
            modifier = Modifier
                .border(1.dp, Color.Cyan)
        ) {
            Text("Header")
        }

        TextField(
            modifier = Modifier
                .fillMaxWidth()
                .border(1.dp, Color.Cyan),
            value = "",
            onValueChange = {},
            placeholder = {
                Text("Enter header")
            }
        )
    }
}

我需要知道它為什么會發生以及如何解決它

庫的版本是“androidx.compose.material:material:1.0.0-alpha10”

Answer 1

OutlinedTextField上方的 Padding 在那里，因為 label 在焦點上移動到頂部，這需要空間。

如果您不想要此功能，您可以通過修改BasicTextField創建自己的可組合的大綱文本字段。