Compose带复选框记事本：动态按视图宽度限制TextField输入字数

要实现根据TextField的可用宽度动态计算最大输入字数，核心思路是获取视图宽度后，结合文本样式计算单字符宽度，最终得出当前宽度下可容纳的最大字符数，具体实现如下：

关键实现步骤 #

• 获取TextField的实际可用宽度：通过Modifier.onSizeChanged监听组件尺寸变化，记录可用宽度。
• 计算单字符宽度与最大容纳数：使用Compose的TextMeasurer工具，测量指定文本样式下单个字符的宽度，再用总宽度除以单字符宽度得到最大可输入字数。
• 动态更新输入限制：将计算出的最大字数作为TextField的输入限制，实时响应宽度变化。

完整代码示例 #

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.TextMeasurer
import androidx.compose.foundation.text.rememberTextMeasurer
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.sp

@Composable
fun DynamicLimitNoteField(
    modifier: Modifier = Modifier,
    textStyle: TextStyle = TextStyle(fontSize = 16.sp),
    placeholderText: String = "输入内容..."
) {
    val focusManager = androidx.compose.ui.focus.LocalFocusManager.current
    val textMeasurer = rememberTextMeasurer()
    val density = LocalDensity.current
    
    var text by remember { mutableStateOf(TextFieldValue("")) }
    var fieldWidth by remember { mutableStateOf(0) }
    var dynamicTextLimit by remember { mutableIntStateOf(30) } // 默认值
    
    // 当视图宽度变化时，重新计算最大可输入字数
    LaunchedEffect(fieldWidth, textStyle) {
        if (fieldWidth <= 0) return@LaunchedEffect
        
        // 测量单个字符的宽度（这里用"中"作为参考，英文场景可替换为"a"）
        val singleCharWidth = textMeasurer.measure(
            text = "中",
            style = textStyle
        ).size.width
        
        if (singleCharWidth > 0) {
            // 计算最大可容纳字符数，预留少量边距避免溢出
            dynamicTextLimit = (fieldWidth / singleCharWidth) - 2
        }
    }

    TextField(
        modifier = modifier
            .fillMaxWidth()
            .onSizeChanged { size ->
                fieldWidth = size.width
            },
        value = text,
        onValueChange = { newText ->
            if (newText.text.length <= dynamicTextLimit) {
                text = newText
            } else {
                focusManager.moveFocus(androidx.compose.ui.focus.FocusDirection.Down)
            }
        },
        placeholder = { Text(text = placeholderText, style = textStyle) },
        textStyle = textStyle,
        colors = TextFieldDefaults.textFieldColors(
            textColor = Color.Black,
            disabledTextColor = Color.Transparent,
            backgroundColor = Color.Transparent,
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent
        ),
        maxLines = 1,
        keyboardOptions = androidx.compose.ui.text.input.KeyboardOptions(
            imeAction = androidx.compose.ui.text.input.ImeAction.Next
        ),
        keyboardActions = androidx.compose.ui.text.input.KeyboardActions(
            onNext = {
                focusManager.moveFocus(androidx.compose.ui.focus.FocusDirection.Down)
            }
        )
    )
}

注意事项 #

• 字符宽度参考：不同字符（汉字、英文、数字）宽度不同，可根据输入场景选择对应参考字符，确保计算精度。
• 边距预留：计算时减去2个字符的宽度是为了避免文本刚好填满时出现截断或溢出，可根据实际UI调整预留值。
• 样式同步：确保测量用的textStyle与TextField实际使用的样式一致，否则计算出的字数会有偏差。

内容的提问来源于stack exchange，提问作者Paweł Łukasz