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

Question

在旧的 View 系统中，我们可以TextInputLayout使用 style 进行密集化Widget.MaterialComponents.TextInputLayout.FilledBox.Dense。

如何TextField在 Compose 中创建密集变体？

Answer 1

首先，1.2.0-alpha04您可以使用TextFieldDecorationBoxwithBasicTextField来构建基于 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
        )
    )
}