如何在 Row Jetpack Compose 中居中元素

Question

如何在一行中居中元素？
如您所見， Text位於中心，但TextField略高。

代碼

@Composable
fun BaseTextField(
    modifier: Modifier = Modifier,
    maxLines: Int = 1,
    enabled: Boolean = true,
    textColor: Color = Black,
    value: String,
    placeholderText: String,
    onValueChange: (String) -> Unit
) {
    TextField(
        modifier = modifier.padding(horizontal = 0.dp, vertical = 0.dp),
        value = value,
        onValueChange = onValueChange,
        maxLines = maxLines,
        enabled = enabled,
        placeholder = { HintText(text = placeholderText) },
        colors = TextFieldDefaults.textFieldColors(
            textColor = textColor,
            focusedIndicatorColor = Transparent,
            disabledIndicatorColor = Transparent,
            unfocusedIndicatorColor = Transparent,
            backgroundColor = Transparent,
        )
    )
}

@Composable
fun PhoneNumberTextField(
    modifier: Modifier = Modifier,
    maxLines: Int = 1,
    enabled: Boolean = true,
    value: String,
    numberPrefix: String,
    onValueChange: (String) -> Unit,
    onPrefixClick: () -> Unit
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(8.dp))
            .background(TextFieldBackground),
        verticalAlignment = Alignment.CenterVertically
    ) {
        NumberPrefixButton(
            modifier = modifier.padding(17.dp),
            numberPrefix = numberPrefix,
            onClick = onPrefixClick
        )
        Box(
            Modifier
                .background(Divider)
                .height(20.dp)
                .width(1.dp)
                .padding(start = 3.dp, end = 14.dp)
        )
        BaseTextField(
            enabled = enabled,
            maxLines = maxLines,
            value = value,
            onValueChange = onValueChange,
            placeholderText = stringResource(id = R.string.phone_number_text_form_hint)
        )
    }
}

Answer 1

這是導致對齊問題的行，

modifier = modifier.padding(17.dp),

verticalAlignment還包括填充。
因此 Row 子項垂直對齊，包括填充。

解決方案

如果不需要，請刪除填充。
否則將填充修改為適當的值。