class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackExampleTheme {
                var textValue by remember { mutableStateOf(TextFieldValue()) }
                CustomTextField(
                    value = textValue,
                    onValueChange = { textValue = it },
                    maxCharacters = 100,
                    modifier = Modifier.fillMaxWidth()
                )
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomTextField(
    value: TextFieldValue,
    onValueChange: (TextFieldValue) -> Unit,
    maxCharacters: Int,
    modifier: Modifier = Modifier
) {
    var charCount by remember(value) { mutableStateOf(value.text.length) }

    Column(
        modifier = Modifier
            .fillMaxSize(),
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        TextField(
            modifier = modifier
                .fillMaxWidth()
                .height(50.dp),
            value = value,
            onValueChange = {
                if (it.text.length <= maxCharacters) {
                    onValueChange(it)
                    charCount = it.text.length
                }
            },
        )

        Text(
            text = "$charCount/$maxCharacters",
            modifier = Modifier
                .height(20.dp)
                .wrapContentWidth()
                .align(Alignment.End),
            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.6f),
            fontSize = 12.sp
        )
    }
}

@Composable
@Preview(showBackground = true)
fun CharCountTextFieldPreview() {
    Surface(
        modifier = Modifier
            .padding(16.dp)
            .height(70.dp)
    ) {
        var textValue by remember { mutableStateOf(TextFieldValue()) }
        CustomTextField(
            value = textValue,
            onValueChange = { textValue = it },
            maxCharacters = 100,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

字符串
为预览添加此构建.gradle

implementation 'androidx.compose.ui:ui-tooling-preview'

型