如何在Android Compose输入框右下角添加字符计数器？

当然可以实现，直接利用Compose输入框的trailingIcon参数就能在输入框内部右侧添加字符计数，同时配合输入长度限制，就能达到你要的效果。

以下是完整实现示例：

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
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.text.font.FontWeight
import androidx.compose.ui.unit.sp

@Composable
fun TextFieldWithCounter() {
    val maxLength = 100
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { newText ->
            // 限制输入长度不超过最大值
            if (newText.length <= maxLength) {
                text = newText
            }
        },
        label = { Text("输入内容") },
        modifier = Modifier.fillMaxWidth(),
        // 在输入框右侧添加计数文本
        trailingIcon = {
            Text(
                text = "${text.length}/$maxLength",
                fontSize = 12.sp,
                color = Color.Gray,
                fontWeight = FontWeight.Light
            )
        }
    )
}

关键说明： #

• 用remember+mutableStateOf维护输入文本状态，确保输入变化时UI能自动更新
• trailingIcon参数用来放置计数文本，它会自动定位在输入框内部右侧
• 在onValueChange中限制输入长度，避免用户输入超过最大字符数
• 可以通过调整Text的fontSize、color等属性，让计数文本和输入框风格更匹配

如果需要使用无样式的BasicTextField，只需要把OutlinedTextField替换为BasicTextField，并自行处理输入框的外观，计数部分的逻辑完全一致。

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