如何使用 Jetpack Compose 降低 Android 中 OutlinedTextField 的高度

Question

我想降低 jetpack 撰写中轮廓文本字段的高度。 但是当我添加 height(50) 修饰符时，OulinedTextField 内的文本就会被剪切。

    OutlinedTextField(
        value = emailText,
        onValueChange = { text -> emailText = text },
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp)
            .padding(horizontal = 16.dp)
            .onFocusEvent {
                coroutineScope.launch {
                    bringIntoViewRequester.bringIntoView()
                }
            },
        shape = RoundedCornerShape(5.dp),
        label = { Text(text = "Email Address") },
        colors = TextFieldDefaults.textFieldColors(
            textColor = Color.White,
            focusedLabelColor = SignInTextColor,
            unfocusedLabelColor = SignInTextColor,
            focusedIndicatorColor = SignInTextColor,
            unfocusedIndicatorColor = SignInTextColor,
            containerColor = Color.Transparent
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Email,
            imeAction = ImeAction.Next
        )
    )

我尝试过调整填充，但仍然没有得到确切的结果。 通过更改文本大小，它可以工作，但我希望我的 OutlinedTextField 文本大小为 17.sp

我尝试使用BasicTextField，他的高度正在减小，但是当我使用标签时，该标签位于边框内部，而不是在线顶部对齐。

我希望我的文本字段高度为 50.dp，OutlinedTextFields 内的文本垂直居中对齐，文本大小应为 17.sp，而不会因为底部填充而剪切任何文本。

Answer 1

我正在使用 BasicTextField 自定义 OutlinedTextField 的大小：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun OutlinedTextField(
    modifier: Modifier = Modifier,
    text: String,
    onValueChange: (String) -> Unit,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    singleLine: Boolean = true,
    maxLines: Int = 1,
    // ...
) {    
    BasicTextField(
        value = text,
        onValueChange = { onValueChange(it) },
        modifier = modifier
            .height(68.dp)
            .width(OutlinedTextFieldDefaults.MinWidth),
        singleLine = singleLine,
        maxLines = maxLines,
        interactionSource = interactionSource,
        textStyle = MaterialTheme.typography.bodyMedium.copy(color = colorScheme.onBackground),
        // ...
    ) { innerTextField ->
        OutlinedTextFieldDefaults.DecorationBox(
            // ...
        )
    }
}

小心大小设置，您可以将文本隐藏在表单后面。