在Compose中，OutlinedTextField不会自适应最小宽度。

Question

我正在尝试将OutlinedTextField（如下图所示）设置为“wrap-content”。最理想的情况是它足够大，恰好适合内部文本500g，并且在用户编辑字段时可以扩展和收缩。如果我没记错的话，在旧的视图中（非Compose版）使用ConstraintLayout是可能实现的，但在Compose中这样做不起作用。

到目前为止，我已经尝试调整各种修饰符（每个修饰符单独调整）：

.defaultMinSize(minWidth = 10.dp)

.width(IntrinsicSize.Min)

.widthIn(1.dp, Dp.Infinity)

.requiredWidth(IntrinsicSize.Min) 

我还尝试将Row放到Compose ConstraintLayout中，但好像没有效果。

如果将大小修饰符设置为较小的宽度，则确实可以减小其宽度，但它不再扩展...

有人能够实现这个吗？

- David Aleksanyan

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

- Gabriele Mariotti

---

这很简单，但对于这样一个简单的情况，他们仍然需要在组合方面做更多的工作，这很愚蠢。 - Dživo Jelić