如何將android compose材質圖標傳遞給textField

Question

我想使用材質圖標作為將其傳遞給 textField 的參數。

@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

這可以使用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 2

texfield 的leadingIcon 參數是一個可組合的函數（標簽也是），所以一種方法是：

@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) }
    )
}