Compose中如何实现TextField文本自动适配大小？

在XML布局里，EditText可以通过app:autoSizeTextType="uniform"实现文本字体自动适配，但Compose的TextField目前没有原生支持该功能，下面是几种手动实现的可行方案：

方案一：用TextMeasurer动态计算字体大小 #

核心逻辑是通过TextMeasurer测量文本在当前字体大小下的宽度，对比TextField的可用宽度，逐步调整字体大小直到文本能完整显示。

代码示例：

@Composable
fun AutoSizeTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    minTextSize: TextUnit = 12.sp,
    maxTextSize: TextUnit = 24.sp,
    step: TextUnit = 1.sp
) {
    val textMeasurer = rememberTextMeasurer()
    val textStyle = remember { mutableStateOf(TextStyle(fontSize = maxTextSize)) }
    var containerWidth by remember { mutableStateOf(0) }

    TextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier
            .onSizeChanged { size ->
                containerWidth = size.width
                if (containerWidth <= 0) return@onSizeChanged
                
                var currentSize = maxTextSize
                var measuredWidth: Int
                do {
                    val tempStyle = TextStyle(fontSize = currentSize)
                    measuredWidth = textMeasurer.measure(
                        text = AnnotatedString(value),
                        style = tempStyle
                    ).size.width
                    if (measuredWidth <= containerWidth || currentSize <= minTextSize) break
                    currentSize -= step
                } while (currentSize >= minTextSize)
                
                textStyle.value = TextStyle(fontSize = max(currentSize, minTextSize))
            },
        textStyle = textStyle.value
    )
}

使用时直接调用AutoSizeTextField，传入对应参数即可。这个方案会在文本内容变化、TextField尺寸改变时自动调整字体大小，确保文本不会超出控件宽度。

方案二：自定义Modifier扩展 #

可以封装一个自动调整字体大小的Modifier，让TextField的使用更简洁：

fun Modifier.autoSizeText(
    text: String,
    minSize: TextUnit = 12.sp,
    maxSize: TextUnit = 24.sp,
    step: TextUnit = 1.sp,
    onTextStyleChanged: (TextStyle) -> Unit
) = composed {
    val textMeasurer = rememberTextMeasurer()
    var containerWidth by remember { mutableStateOf(0) }

    onSizeChanged { size ->
        containerWidth = size.width
        if (containerWidth <= 0) return@onSizeChanged

        var currentSize = maxSize
        var measuredWidth: Int
        do {
            val tempStyle = TextStyle(fontSize = currentSize)
            measuredWidth = textMeasurer.measure(AnnotatedString(text), tempStyle).size.width
            if (measuredWidth <= containerWidth || currentSize <= minSize) break
            currentSize -= step
        } while (currentSize >= minSize)

        onTextStyleChanged(TextStyle(fontSize = max(currentSize, minSize)))
    }
}

使用示例：

@Composable
fun CustomAutoSizeTextField() {
    var text by remember { mutableStateOf("") }
    var textStyle by remember { mutableStateOf(TextStyle(fontSize = 24.sp)) }

    TextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier
            .fillMaxWidth()
            .autoSizeText(
                text = text,
                onTextStyleChanged = { textStyle = it }
            ),
        textStyle = textStyle
    )
}

方案三：借助第三方UI库（可选） #

部分成熟的Compose UI组件库已经内置了支持自动调整字体大小的TextField，如果不想手动实现，可以直接使用这类库的组件，省去重复造轮子的工作。

内容的提问来源于stack exchange，提问作者Abhishek