Как передать значки материалов для Android в textField

Question

Я хочу использовать значки материалов в качестве аргумента, передавая его текстовому полю.

@Composable
fun NormalTextField(
    icon: () -> Unit,  // how to pass material icon to textField
    label: String
) {
    val (text, setText) = mutableStateOf("")
    TextField(
        leadingIcon = icon,
        value = text,
        onValueChange = setText,
        label = label
    )
}

Answer 1

Аргумент leadIcon для texfield - это компонуемая функция (также метка), поэтому один из способов сделать это:

      @Composable
fun Example() {
    NormalTextField(label = "Email") {
        Icon(
            imageVector = Icons.Outlined.Email,
            contentDescription = null
        )
    }
}

@Composable
fun NormalTextField(
    label: String,
    Icon: @Composable (() -> Unit)
) {
    val (text, setText) = mutableStateOf("")
    TextField(
        leadingIcon = Icon,
        value = text,
        onValueChange = setText,
        label = { Text(text = label) }
    )
}

Answer 2

Это можно сделать с помощью InlineTextContent . Вот пример того, как вставить значок в начало текста. Вы можете обернуть это в другой составной объект, если хотите просто передать значок в качестве параметра.

      Text(text = buildAnnotatedString {
    appendInlineContent("photoIcon", "photoIcon")
    append("very long breaking text very long breaking text very long breaking text very long breaking text very long breaking text")
}, inlineContent = mapOf(
    Pair("photoIcon", InlineTextContent(
        Placeholder(width = 1.7.em, height = 23.sp, placeholderVerticalAlign = PlaceholderVerticalAlign.TextTop)
    ) {
        Image(
            painterResource(R.drawable.ic_cameraicon),"play",
            modifier = Modifier.fillMaxWidth().padding(end = 10.dp),
            alignment = Alignment.Center,
            contentScale = ContentScale.FillWidth)
    }
)), lineHeight = 23.sp, color = Color.White, fontFamily = HelveticaNeue, fontSize = 18.sp, fontWeight = FontWeight.Medium)

Результат будет выглядеть так:

Answer 3

Как показал @Nando, используяImage, вы можете сделать то же самое, используяIconиз пользовательского интерфейса материала.

      Text(text = buildAnnotatedString {
            appendInlineContent("icon", "icon")
            append(text)
        },
            inlineContent = mapOf(
                Pair("icon", InlineTextContent(
                    Placeholder(
                        width = 1.7.em,
                        height = 23.sp,
                        placeholderVerticalAlign = PlaceholderVerticalAlign.TextTop
                    )
                ) {
                    Icon(
                        Icon(Icons.Rounded.Person),
                        contentDescription = null,
                        tint = Color.Blue
                    )
                }
                )),
            lineHeight = 23.sp,
            fontSize = 14.sp,
            fontWeight = FontWeight.Normal)