android - Jetpack Compose 中的密集文本字段

Question

在旧的 View 系统中，我们可以制作 TextInputLayout密集使用风格Widget.MaterialComponents.TextInputLayout.FilledBox.Dense .
如何创建 TextField 的密集变体在撰写？

Answer 1

以 1.2.0-alpha04 开头您可以使用 TextFieldDecorationBox 连同 BasicTextField基于 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 // make it dense
        )
    )
}