从 1.2.0-alpha04
开始,您可以使用 BasicTextField
与 TextFieldDecorationBox
结合使用,构建基于 Material Design 文本字段的自定义文本字段。
要创建紧凑型文本字段,请使用 contentPadding
参数来减少输入字段周围的填充。
类似于:
var text by remember { mutableStateOf("") }
val singleLine = true
val enabled = true
val interactionSource = remember { MutableInteractionSource() }
BasicTextField(
value = text,
onValueChange = { text = it },
modifier = Modifier
.indicatorLine(enabled, false, interactionSource, TextFieldDefaults.textFieldColors())
.background(
TextFieldDefaults.textFieldColors().backgroundColor(enabled).value,
TextFieldDefaults.TextFieldShape
)
.width(TextFieldDefaults.MinWidth),
singleLine = singleLine,
interactionSource = interactionSource
) { innerTextField ->
TextFieldDecorationBox(
value = text,
innerTextField = innerTextField,
enabled = enabled,
singleLine = singleLine,
visualTransformation = VisualTransformation.None,
interactionSource = interactionSource,
label = { Text("Label") },
contentPadding = TextFieldDefaults.textFieldWithLabelPadding(
start = 4.dp,
end = 4.dp,
bottom = 4.dp
)
)
}
![enter image description here](https://istack.dev59.com/cemmE.webp)