Jetpack Compose 中的密集文本字段

Question

Jetpack Compose 中的密集文本字段

androidandroid-jetpack-composeandroid-compose-textfield

4

在旧的 View 系统中，我们可以使用样式 Widget.MaterialComponents.TextInputLayout.FilledBox.Dense 来使 TextInputLayout 变得紧凑。

在 Compose 中，我该如何创建一个紧凑型的 TextField？

- Risal Fajar Amiyardi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriele Mariotti · Answer 1

从 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 // make it dense
        )
    )
}