如何在jetpack compose中将drawable添加到文本字段旁边？

Question

我试图弄清楚如何将可绘制对象添加到文本字段（OutlinedTextField）内的文本，但没有成功。我已经在drawable文件夹中创建了一个drawable。我是否需要创建一个单独的可组合项来插入它，还是可以直接将其添加到文本字段中？

这是我在可组合项中的文本字段：

        Spacer(modifier = Modifier.height(20.dp))
        OutlinedTextField(
            value = username.value,
            onValueChange = { newText ->
                username.value = newText
            },
            label = { Text(text = "Username") },
            placeholder = { Text("") }, // placeholder / hint
            modifier = Modifier
                .fillMaxWidth(180F)
        )

Answer 1

使用leadingIcon代替placeHolder

           OutlinedTextField(
               value = username.value,
               onValueChange = { newText ->
                   username.value = newText
               },
               label = { Text(text = "Username") },
               leadingIcon = { Icon(imageVector = Icons.Default.Place, contentDescription = null)},
               modifier = Modifier
                   .fillMaxWidth(180F)
           )

Answer 2

使用前导图标并用图像代替图标

OutlinedTextField(
           value = username.value,
           onValueChange = { newText ->
               username.value = newText
           },
           label = { Text(text = "Username") },
           leadingIcon = { 
            Image(
                            modifier = Modifier.size(35.dp),
                            painter = painterResource(R.drawable.facebook),
                            contentDescription = "facebook icon",
                        )

    },
           modifier = Modifier
               .fillMaxWidth(180F)
       )