如何垂直对齐 TextField 中的文本和 leading/trailing 图标

Question

有没有办法将trailing/leading图标和文字设置在同一层级？默认情况下，它不是如下图所示。我尝试更改 TextField 中的 fontStyle 参数但没有成功。文字显示高于图标

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.Icon
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowForward
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.window.singleWindowApplication

fun main() = singleWindowApplication {
    var text by remember { mutableStateOf("TEXT") }
    
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier.fillMaxWidth(),
        leadingIcon = {
            Icon(contentDescription = null,
                 imageVector = Icons.Default.ArrowForward)
        },
        trailingIcon = {
            Icon(contentDescription = null,
                 imageVector = Icons.Default.ArrowForward)
        })
}

Answer 1

有几种解决方法。对于桌面 Compose，偏移图标。对于移动 Compose，调整基线。最后，只需创建一个自定义 TextField。

图标底部可能有额外的填充。也可能是图标和文本始终对齐到顶部。您可以将图标替换为没有底部填充的图标或将图标向上移动。你可以看出图标影响了垂直对齐，因为如果你注释掉你的图标，文本会垂直居中。您也可以尝试减小图标的大小。

在桌面版 Compose 上，将图标上移：

OutlinedTextField(
     value = text,
     onValueChange = { text = it },
     modifier = Modifier.fillMaxWidth(),
     leadingIcon = {
          Icon(
                modifier = Modifier.offset(y = -3.dp),
                contentDescription = null,
                imageVector = Icons.Default.ArrowForward
          )
     },
     trailingIcon = {
          Icon(
                modifier = Modifier.offset(y = -3.dp),
                contentDescription = null,
                imageVector = Icons.Default.ArrowForward
          )
     })

在移动设备上，您可以调整文本的baseline：

OutlinedTextField(
    value = text,
    textStyle = TextStyle(baselineShift = BaselineShift(-0.2f)),
    onValueChange = { text = it },
    modifier = Modifier.fillMaxWidth(),
    leadingIcon = {
        Icon(
            contentDescription = null,
            imageVector = Icons.Default.ArrowForward
        )
    },
    trailingIcon = {
        Icon(
            contentDescription = null,
            imageVector = Icons.Default.ArrowForward
        )
    })

这里还有一个自定义的 TextField：

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            CustomTextField(
                initialText = "cool",
                onValueChange = {

                },
                onLeftButtonClick = {

                },
                onRightButtonClick = {

                }
            )
        }
    }
}

@Composable
fun CustomTextField(
    initialText: String,
    onValueChange: (text: String) -> Unit,
    onLeftButtonClick: () -> Unit,
    onRightButtonClick: () -> Unit
) {

    var text by remember { mutableStateOf(initialText) }

    Row(
        modifier = Modifier

            .fillMaxWidth()
            .wrapContentSize()
            .background(color = Color.White, shape = RoundedCornerShape(8.dp))

            .border(width = 1.dp, shape = RoundedCornerShape(8.dp), color = Color(0xFF585858))
    ) {

        ConstraintLayout(
            modifier = Modifier.fillMaxWidth()
        ) {

            val (left, mid, right) = createRefs()

            IconButton(onClick = onLeftButtonClick,
                modifier = Modifier.constrainAs(left) {
                    start.linkTo(parent.start, margin = 10.dp)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }) {
                Icon(
                    contentDescription = null,
                    imageVector = Icons.Default.ArrowForward,
                )
            }


            IconButton(onClick = onRightButtonClick,
                modifier = Modifier.constrainAs(right) {
                    end.linkTo(parent.end, margin = 10.dp)
                    top.linkTo(parent.top)
                    bottom.linkTo(parent.bottom)
                }) {
                Icon(
                    contentDescription = null,
                    imageVector = Icons.Default.ArrowForward,
                )
            }

            TextField(
                value = text,
                onValueChange = {
                    text = it
                    onValueChange(it)
                },
                colors = TextFieldDefaults.textFieldColors(
                    backgroundColor = Color.White
                ),
                modifier = Modifier
                    .offset(y = 4.dp)
                    .constrainAs(mid) {
                        start.linkTo(left.end, margin = 10.dp)
                        top.linkTo(parent.top)
                        end.linkTo(right.start, margin = 10.dp)
                        bottom.linkTo(parent.bottom)
                        width = Dimension.fillToConstraints
                    })
        }
    }

如何垂直对齐 TextField 中的文本和 leading/trailing 图标

How to vertically align the text and leading/trailing icons in a TextField

kotlin

android-jetpack-compose

compose-desktop