如何将 jetpack compose 的 OutlinedTextField 中的leadingIcon 与值/占位符对齐

Question

我是 jetpack compose 的新手，我希望我的应用程序加载 Exo 两种浅色字体，这样我就可以像这样覆盖材质排版，

  val exoTwoLight = FontFamily(
    Font(R.font.exo_two_light),
    Font(R.font.exo_two_light, FontWeight.Bold)
)



val exoTwoLightTypography = Typography(
    h1 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 96.sp
    ),
    h2 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 60.sp
    ),
    h3 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 48.sp
    ),
    h4 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 34.sp
    ),
    h5 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp
    ),
    h6 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 12.sp
    ),
    subtitle1 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),
    subtitle2 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Medium,
        fontSize = 14.sp
    ),
    body1 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),
    body2 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Normal,
        fontSize = 14.sp
    ),
    button = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Medium,
        fontSize = 14.sp,
    ),
    caption = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp,
    ),
    overline = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Normal,
        fontSize = 10.sp,
    )
)

现在，当我尝试在应用程序中加载输入字段时，我可以看到占位符和前导图标根本没有对齐

我尝试自定义占位符，因为它需要作为可组合项通过自定义，我的意思是向占位符添加 2/4 dp 的顶部填充

 Row(modifier = Modifier.padding(top=10.dp)) {
                OutlinedTextField(
                    leadingIcon = {
                        Icon(
                            painter = painterResource(id = R.drawable.gallery_icon),
                            contentDescription = "",
                            tint = colorResource(R.color.teal_200),
                            modifier = Modifier.clickable {
                            }
                        )
                    },
                    placeholder = {
                        Text(
                            text = "Placeholder",
                            style = MaterialTheme.typography.button,
                            modifier = Modifier.padding(top = 3.dp)
                        )
                    },
                    modifier = Modifier.fillMaxWidth(),
                    readOnly = false,
                    value = sampleValue,
                    onValueChange = {
                        sampleValue = it
                    },
                    maxLines = 1,
                    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
                )
            }

它只解决了占位符的问题，但值似乎未对齐

这是完整的代码

 var sampleValue by remember {
            mutableStateOf("")
        }
        Column{
            Row(modifier = Modifier.padding(top=10.dp)){
                OutlinedTextField(
                    leadingIcon = {
                        if (true) {
                            Icon(
                                painter = painterResource(id = R.drawable.capture_more_images),
                                contentDescription = "",
                                tint = colorResource(R.color.teal_200),
                                modifier = Modifier.clickable {
                                }
                            )
                        } else {
                            Icon(
                                painter = painterResource(id = R.drawable.capture_more_images),
                                contentDescription = "",
                                tint = colorResource(R.color.disabled)
                            )
                        }
                    },
                     placeholder = {
                         Row(
                             modifier = Modifier.height(24.dp),
                             verticalAlignment = Alignment.CenterVertically
                         ){
                            Text(

                                text = "Placeholder",
                                style = MaterialTheme.typography.button
                            )
                         }
                     },
                    modifier = Modifier.fillMaxWidth(),
                    readOnly = false,
                    value = sampleValue,
                    onValueChange = {
                        sampleValue = it
                    },
                    maxLines = 1,
                    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
                )
            }

            Row(modifier = Modifier.padding(top=10.dp)) {
                OutlinedTextField(
                    leadingIcon = {
                        Icon(
                            painter = painterResource(id = R.drawable.gallery_icon),
                            contentDescription = "",
                            tint = colorResource(R.color.teal_200),
                            modifier = Modifier.clickable {
                            }
                        )
                    },
                    placeholder = {
                        Text(
                            text = "Placeholder",
                            style = MaterialTheme.typography.button,
                            modifier = Modifier.padding(top = 3.dp)
                        )
                    },
                    modifier = Modifier.fillMaxWidth(),
                    readOnly = false,
                    value = sampleValue,
                    onValueChange = {
                        sampleValue = it
                    },
                    maxLines = 1,
                    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
                )
            }

            Row(modifier = Modifier.padding(top=10.dp)) {
                OutlinedTextField(
                    placeholder = {
                        Text(
                            text = "Placeholder",
                            style = MaterialTheme.typography.button,
                        )
                    },
                    modifier = Modifier.fillMaxWidth(),
                    value = sampleValue,
                    onValueChange = {
                        sampleValue = it
                    }
                )
            }
        }

我希望该占位符与前导图标垂直居中对齐（不提供任何顶部填充），解决方案是什么？

Answer 1

解决此问题的方法是将singleLine的属性设置为。像这样：TextFieldtrue

TextField(
    singleLine = true,
    placeholder = {
        Text(text = "Search for reminders")
    },
    leadingIcon = {
        Icon(
            painter = painterResource(id = R.drawable.search_icon),
            tint = MaterialTheme.colorScheme.outline,
            contentDescription = "Back button"
        )
    }
)