如何在TextField中实现文本与前后引导图标的垂直对齐

出现这个问题的原因是Material组件库的TextField默认会让前后图标在输入框的整个高度范围内垂直居中，而输入文本是基于文本基线对齐的，默认预留了上下行高空间，就会出现文本比图标位置高的视觉差，和你描述的现象一致：

解决方案 #

方案1：添加垂直偏移快速适配

直接给Icon组件加y轴向下偏移，根据你使用的字体大小微调偏移量即可，默认16sp字号下设置2.dp偏移就可以对齐，修改后的代码示例：

import androidx.compose.foundation.layout.offset
import androidx.compose.ui.unit.dp

// 其余代码保持不变
OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier.fillMaxWidth(),
    leadingIcon = {
        Icon(
            modifier = Modifier.offset(y = 2.dp),
            contentDescription = null,
            imageVector = Icons.Default.ArrowForward
        )
    },
    trailingIcon = {
        Icon(
            modifier = Modifier.offset(y = 2.dp),
            contentDescription = null,
            imageVector = Icons.Default.ArrowForward
        )
    }
)

方案2：自动适配不同字号

如果需要适配不同字体大小的场景，可以通过文本基线对齐的方式实现自动适配，无需手动调整偏移值：

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.alignByBaseline
import androidx.compose.material.Text
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

// 其余代码保持不变
OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier.fillMaxWidth(),
    leadingIcon = {
        Row {
            Icon(
                modifier = Modifier.alignByBaseline(),
                contentDescription = null,
                imageVector = Icons.Default.ArrowForward
            )
            // 透明占位文本，字号和TextField的textSize保持一致即可
            Text(
                text = "",
                fontSize = 16.sp,
                modifier = Modifier.alignByBaseline(),
                color = Color.Transparent
            )
        }
    },
    // trailingIcon逻辑和leadingIcon完全一致
    trailingIcon = {
        Row {
            Icon(
                modifier = Modifier.alignByBaseline(),
                contentDescription = null,
                imageVector = Icons.Default.ArrowForward
            )
            Text(
                text = "",
                fontSize = 16.sp,
                modifier = Modifier.alignByBaseline(),
                color = Color.Transparent
            )
        }
    }
)

提示：以上两种方案同时兼容Material和Material3版本的TextField组件。

内容的提问来源于stack exchange，提问作者Zen1000