OutlinedTextField 不会在 Compose 中调整为最小宽度

Question

我试图使 OutlinedTextField （见下图）充当“wrap-content”。理想的情况是它足够大以适合内部文本500g并在用户编辑字段时扩展和收缩。如果我没记错的话，可以使用（非 Compose）ConstraintLayout 来处理旧视图，但在 Compose 中这不起作用。

到目前为止，我已经尝试调整各种修改器（每个修改器都是单独的）：

.defaultMinSize(minWidth = 10.dp)

.width(IntrinsicSize.Min)

.widthIn(1.dp, Dp.Infinity)

.requiredWidth(IntrinsicSize.Min) 

我也尝试将 放入RowCompose 中ConstraintLayout，但似乎没有任何效果

如果我将尺寸修改器设置为较小的宽度，它确实会减小宽度，但不再扩展......

有人能够实现这一点吗？

Answer 1

有OutlinedTextField默认的最小尺寸。

您可以使用OutlinedTextFieldDecorationBox与 一起并BasicTextField应用修饰符来实现它width(IntrinsicSize.Min)。

就像是：

var text by remember { mutableStateOf("500") }
val interactionSource = remember { MutableInteractionSource() }
val enabled = true
val singleLine = true

BasicTextField(
    value = text,
    onValueChange = {text = it},
    interactionSource = interactionSource,
    enabled = enabled,
    singleLine = singleLine,
    modifier = Modifier.width(IntrinsicSize.Min)
) {
    TextFieldDefaults.OutlinedTextFieldDecorationBox(
        value = text,
        visualTransformation = VisualTransformation.None,
        innerTextField = it,
        singleLine = singleLine,
        enabled = enabled,
        interactionSource = interactionSource,
        // keep vertical paddings but change the horizontal
        contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
            start = 8.dp, end = 8.dp
        ),
        colors = TextFieldDefaults.outlinedTextFieldColors()
    )
}

注意：至少需要 compose 版本1.2.0