如何删除 Jetpack Compose OutlinedTextField 上方的额外填充？答案

【问题标题】：How remove extra padding above Jetpack Compose OutlinedTextField?如何删除 Jetpack Compose OutlinedTextField 上方的额外填充？
【发布时间】：2021-02-10 16:46:44
【问题描述】：

我正在尝试像这样将 OutlinedTextField 放入 Box 元素之后的 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”

【问题讨论】：

两个代码在 Android Studio 预览版中产生相同的填充

标签： android android-jetpack-compose

【解决方案1】：

OutlinedTextField 上方的 Padding 之所以存在，是因为标签在聚焦时会移到顶部，这需要空间。

如果你不想要这个功能，你可以通过修改BasicTextField来创建你自己的可组合的轮廓文本字段。

【讨论】：