如何检测Jetpack Compose中TextField是否溢出并实现自动调整大小？

核心思路 #

既然TextField没有onTextLayout，我们可以通过手动测量文本宽度结合动态调整字号的方式实现自动适配，同时保留trailingIcon的功能。核心是利用TextMeasurer工具类，在文本或组件尺寸变化时，计算出刚好能在可用宽度内显示完整内容的最大字号。

具体实现代码 #

@Composable
fun AutoResizingTextField(
    text: String,
    onTextChange: (String) -> Unit,
    trailingIcon: @Composable () -> Unit,
    maxFontSize: TextUnit = 16.sp,
    minFontSize: TextUnit = 10.sp
) {
    val textMeasurer = rememberTextMeasurer()
    // 记录TextField的可用宽度（总宽度减去trailingIcon的预估宽度）
    var availableWidth by remember { mutableStateOf(0f) }
    // 记录当前使用的字号
    var currentFontSize by remember { mutableStateOf(maxFontSize) }

    // 监听文本和可用宽度变化，计算合适的字号
    LaunchedEffect(text, availableWidth) {
        if (availableWidth <= 0) return@LaunchedEffect

        // 从最大字号开始往下试，找到第一个能完整显示文本的字号
        var fontSize = maxFontSize
        var textWidth: Float
        do {
            val textLayoutResult = textMeasurer.measure(
                text = text,
                style = TextStyle(fontSize = fontSize)
            )
            textWidth = textLayoutResult.size.width.toFloat()
            if (textWidth <= availableWidth) break
            // 每次递减0.5sp，可根据需求调整步长
            fontSize -= 0.5.sp
        } while (fontSize >= minFontSize)

        currentFontSize = fontSize.coerceIn(minFontSize, maxFontSize)
    }

    TextField(
        value = text,
        onValueChange = onTextChange,
        textStyle = TextStyle(fontSize = currentFontSize),
        trailingIcon = trailingIcon,
        modifier = Modifier
            .fillMaxWidth()
            .onSizeChanged { size ->
                // 预估trailingIcon的宽度，这里假设图标是24dp（可根据实际图标大小调整）
                val iconWidth = with(LocalDensity.current) { 24.dp.toPx() }
                // 减去内边距和图标宽度，得到文本的可用宽度
                availableWidth = size.width - iconWidth - 32.dp.toPx() // 32dp是TextField左右内边距总和
            }
    )
}

代码说明 #

• TextMeasurer：Jetpack Compose提供的文本测量工具，用于计算指定文本在特定字号下的宽度。
• onSizeChanged：获取TextField的整体宽度，减去图标和内边距的宽度，得到文本可使用的空间。
• LaunchedEffect：当文本或可用宽度变化时，从最大字号开始逐步递减，直到文本能完整显示在可用宽度内。
• 可调整参数：maxFontSize、minFontSize控制字号范围，iconWidth和内边距值根据实际UI需求修改。

使用示例 #

@Composable
fun DropdownMenuDemo() {
    var selectedText by remember { mutableStateOf("这是一段非常长的选中文本，用来测试自动调整字号的效果") }
    var expanded by remember { mutableStateOf(false) }
    val options = listOf(
        "短文本",
        "中等长度的测试文本",
        "这是一段非常长的选中文本，用来测试自动调整字号的效果"
    )

    Column(modifier = Modifier.padding(16.dp)) {
        AutoResizingTextField(
            text = selectedText,
            onTextChange = {}, // 下拉菜单选中后更新文本，这里不需要手动输入
            trailingIcon = {
                IconButton(onClick = { expanded = !expanded }) {
                    Icon(Icons.Default.ArrowDropDown, contentDescription = "展开菜单")
                }
            }
        )

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            options.forEach { option ->
                DropdownMenuItem(
                    onClick = {
                        selectedText = option
                        expanded = false
                    }
                ) {
                    Text(text = option)
                }
            }
        }
    }
}

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