如何使 OutlinedTextField 中的leadingIcon 与 Jetpack Compose 中的轮廓顶部对齐？

Question

OutlinedTextfield 很棒，因为它提供了一个看起来很棒的预格式化文本字段，并且您可以根据需要进行调整。其中一个功能是一个领先的图标，问题是它总是垂直居中（参见图片底部），我真的希望它与提示一起位于轮廓的顶角

Answer 1

我不认为我们可以直接改变引导图标的重力。需要做一些解决方法。试试这个，

var input by remember { mutableStateOf("") }
var isFocused by remember { mutableStateOf(false) }
Row(
    modifier = Modifier
        .border(
            width = if (isFocused) 2.dp else 1.dp,
            color = if (isFocused) Color.Gray else Color.Gray.copy(alpha = 0.8f),
            shape = RoundedCornerShape(5.dp)
        )
        .clip(RoundedCornerShape(5.dp))
        .height(120.dp)
        .fillMaxWidth()
 ) {
    Box(
       modifier = Modifier.defaultMinSize(48.dp, 48.dp),
       contentAlignment = Alignment.Center
    ) {
       Icon(
            imageVector = Icons.Default.Info,
            contentDescription = null
       )
    }
    BasicTextField(
         value = input,
         onValueChange = { input = it },
         modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .onFocusChanged { state ->
                isFocused = state.isFocused
            }
            .padding(top = 8.dp)
    )
 }

您可以向 BasicTextField 添加更多自定义功能。

Answer 2

这可能有点晚了，但我找到了解决方案。将 OutlinedTextArea 包装在使用 Modifier.height(IntrinsicSize.Min) 的列中。领先的图标是 @Composable 所以将你的图标包装在像这样的框中......

Box( contentAlignment = Alignment.TopCenter,
    modifier = Modifier
        .fillMaxHeight() 
        .padding(top = 16.dp ) 
   ) {
      Icon( imageVector = ImageVector.vectorResource(iconRes))
     }

.fillMaxHeight 使 Box 采用 Column 的大小，并且填充将其向下推到您想要的位置。可以放弃 Column 并将 Modifier.height(IntrinsicSize.Min) 直接添加到 OutlinedTextArea。我没有尝试这样做，因为我需要专栏来做其他事情，但它对我有用。我从这篇文章中得到了灵感。