如何在Jetpack Compose中放大TextField的密码点图标？

方案1：快速调整字体大小（简单直接） #

如果可以接受密码输入框的整体文本（包括密码点）放大，直接在TextField的textStyle参数中设置更大的字体尺寸即可：

TextField(
    // 保留你原有的其他参数
    textStyle = TextStyle(fontSize = 20.sp) // 根据需求调整大小
)

方案2：自定义密码视觉变换（单独放大密码点） #

如果只想放大密码点，不改变输入文本的默认字体大小，可以自定义VisualTransformation来单独控制密码点的样式：

1. 先定义自定义的密码视觉变换类：

class LargePasswordVisualTransformation(
    private val maskChar: Char = '●', // 可替换为更大的符号，比如'🔴'
    private val maskSize: TextUnit = 24.sp // 密码点的目标大小
) : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        // 生成与输入长度一致的掩码文本
        val maskedText = AnnotatedString(CharArray(text.length) { maskChar }.joinToString(""))
        // 保持光标位置映射不变
        val offsetMapping = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int = offset
            override fun transformedToOriginal(offset: Int): Int = offset
        }
        // 给掩码文本单独设置更大的字体大小
        val styledMask = maskedText.toMutableAnnotatedString().apply {
            addStyle(
                style = SpanStyle(fontSize = maskSize),
                start = 0,
                end = length
            )
        }
        return TransformedText(styledMask, offsetMapping)
    }
}

2. 在你的TextField中替换默认的PasswordVisualTransformation为自定义实现：

TextField(
    // 保留你原有的modifier、value、onValueChange等参数
    visualTransformation = LargePasswordVisualTransformation(maskSize = 24.sp),
    textStyle = TextStyle(fontSize = 16.sp), // 输入文本的常规大小
    // 其他参数不变
)

完整修改后的代码示例 #

var text by remember { mutableStateOf("") }
var isFocused by remember { mutableStateOf(false) }
val color = if (isFocused || text.isNotEmpty()) DefaultDYTColor else Color.Transparent

// 自定义大尺寸密码掩码变换
class LargePasswordVisualTransformation(
    private val maskChar: Char = '●',
    private val maskSize: TextUnit = 24.sp
) : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        val maskedText = AnnotatedString(CharArray(text.length) { maskChar }.joinToString(""))
        val offsetMapping = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int = offset
            override fun transformedToOriginal(offset: Int): Int = offset
        }
        val styledMask = maskedText.toMutableAnnotatedString().apply {
            addStyle(
                style = SpanStyle(fontSize = maskSize),
                start = 0,
                end = length
            )
        }
        return TransformedText(styledMask, offsetMapping)
    }
}

TextField(
    modifier = Modifier
        .fillMaxWidth()
        .border(
            width = if (isFocused) 1.dp else 0.dp,
            color = color,
            shape = RoundedCornerShape(25.dp)
        )
        .clip(RoundedCornerShape(25.dp))
        .onFocusChanged {
            isFocused = it.isFocused
        },
    value = text,
    onValueChange = { newText ->
        text = newText
    },
    visualTransformation = LargePasswordVisualTransformation(maskSize = 24.sp),
    leadingIcon = {
        Image(painter = painterResource(id = R.drawable.ic_password), contentDescription = "密码图标" )
    },
    textStyle = TextStyle(fontSize = 16.sp),
    colors = TextFieldDefaults.textFieldColors(
        cursorColor = MaterialTheme.colors.DYTThemeColor,
        disabledTextColor = Color.Transparent,
        focusedIndicatorColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent,
        disabledIndicatorColor = Color.Transparent
    )
)

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