TextField中的文本问题 - Android Jetpack Compose

Question

我将TextField的高度设置为40dp，但是像这张图片一样，我看不清文本。

我该如何解决这个问题？

@Composable
fun SearchTextField(
    onSearchClick: () -> Unit
) {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        placeholder = { Text("Search") },
        singleLine = true,
        leadingIcon = {
            Icon(
                imageVector = Icons.Filled.Search,
                contentDescription = ""
            )
        },
        modifier = Modifier.height(40.dp),
        shape = RoundedCornerShape(10.dp),
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent
        ),
        keyboardActions = KeyboardActions {
            onSearchClick()
        },
        textStyle = TextStyle.Default
    )
}

- AndroidLover

Answer 1

在Compose的TextField中存在一个嵌入式高度。因为您固定了高度，所以内容无法完全显示。解决这个问题有三种方法：您可以选择您需要的方式来解决这个问题。

1. 显然，您需要增加Compose中TextField的高度。TextField的最小高度定义在TextFieldDefaults中。TextField的minHeight为56dp。您的modifier.height只需高于此高度即可。并且TextFiled的内置padding为16dp。

2. 减小字体的大小以适应较低的高度。

3. 自定义TextField。如果您觉得TextField不合适，您可以自定义TextField以满足您的需求。使用BasicTextField定义符合要求的输入框。我在这里放了我的Own BasicTextField。您可以先尝试它，并将其写成相应的复制：

@Composable
fun InputEditText(
    value: String,
    modifier: Modifier,
    onValueChange: (String) -> Unit,
    contentTextStyle: TextStyle,
    hintTextStyle: TextStyle,
    placeHolderString: String = "",
    enabled: Boolean = true,
    readOnly: Boolean = false,
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    cursorColor: Color = Color.Black,
) {
    BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier,
        textStyle = contentTextStyle,
        decorationBox = {innerTextField ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .offset {
                        if (contentTextStyle.textAlign == TextAlign.Start)
                            IntOffset(x = 10, y = 0)
                        else
                            IntOffset(x = 0, y = 0)
                    },
                contentAlignment = Alignment.CenterStart,
            ) {
                if (value.isEmpty()) {
                    Text(
                        text = placeHolderString,
                        color = hintTextStyle.color,
                        fontSize = hintTextStyle.fontSize
                    )
                }

                innerTextField()

            }
        },
        enabled = enabled,
        readOnly = readOnly,
        singleLine = singleLine,
        maxLines = maxLines,
        keyboardOptions = keyboardOptions,
        keyboardActions = keyboardActions,
        cursorBrush = SolidColor(cursorColor)
    )
}

- Future Deep Gone