Jetpack Compose中如何在OutlinedTextField内的文本旁添加Drawable

嘿，不用特意创建单独的Composable啦！OutlinedTextField本身就支持直接在文本旁添加图标（也就是你说的Drawable），用它自带的参数就能轻松搞定～

你可以用这两个核心参数来实现：

• leadingIcon：在输入框左侧添加图标
• trailingIcon：在输入框右侧添加图标

直接修改你现有的代码就行，给你调整好的示例：

Spacer(modifier = Modifier.height(20.dp))
OutlinedTextField(
    value = username.value,
    onValueChange = { newText -> username.value = newText },
    label = { Text(text = "Username") },
    placeholder = { Text("") }, // placeholder / hint
    // 左侧添加你自定义的Drawable
    leadingIcon = {
        Icon(
            painter = painterResource(id = R.drawable.your_drawable_name),
            contentDescription = "Username icon" // 无障碍描述，建议不要省略
        )
    },
    // 如果需要在右侧添加图标，就用这个参数
    // trailingIcon = {
    //     Icon(
    //         painter = painterResource(id = R.drawable.another_drawable),
    //         contentDescription = "Action icon"
    //     )
    // },
    modifier = Modifier
        .fillMaxWidth(0.8f) // 注意：fillMaxWidth接受0-1的比例值，你原来的180F是错误的，这里改成占屏幕80%宽度
    // 如果要固定宽度，应该用.width(180.dp)
)

另外补充几个小细节：

• 如果你想调整图标的大小或颜色，可以给Icon添加modifier，比如Modifier.size(24.dp).tint(Color.Gray)
• contentDescription是为了无障碍服务设置的，最好不要留空，能让屏幕阅读器正确识别图标用途

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