将内容环绕在 TextField 中的文本周围

Question

我正在尝试制作一个最小尺寸的 TextField，并围绕其中写入的文本展开，我该如何实现？

这是我的测试代码

var text by rememberSaveable { mutableStateOf("Prova") }
Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text(text = "Test")
    TextField(
        modifier = Modifier
//                .widthIn(10.dp, Dp.Infinity)
//                .width(IntrinsicSize.Min)
            .width(30.dp)
            .wrapContentWidth(),
        value = text,
        onValueChange = {
            text = it
        },
        textStyle = TextStyle.Default.copy(
            textAlign = TextAlign.End
        )
    )
}

这是我寻找的结果（应该用更多的文本宽度展开，直到它碰到左边的文本）

感谢您的帮助！

Answer 1

使用 Spacer 和中间的 Modifier.weight(1f) 将使其有效。

我建议将 TextField 替换为 BasicTextField 以更好地控制其外观（特别是实现最小宽度小于 MinWidth 默认值 280.dp).

var text by rememberSaveable { mutableStateOf("Prova") }
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text(text = "Test")
        Spacer(modifier = Modifier.weight(1f))
        TextField(
            modifier = Modifier
                .widthIn(1.dp),
            value = text,
            onValueChange = {
                text = it
            },
            textStyle = TextStyle.Default.copy(
                textAlign = TextAlign.End
            )
        )
    }