Android compose OutlinedTextField 输入框设置固定高度后,内容挤压显示不全

原因:

decorationBox里边contentPadding() 默认为16.dp
internal val TextFieldPadding = 16.dp

修改方法1:

copy OutlinedTextField.kt 源码,decorationBox的contentPadding参数开放出来

/**
 * @author   创建人:蒙石瑞
 * @date     创建时间:2024/8/7 09:54
 * @Description    创建内容:(这里用一句话描述这个类的作用)
 */

internal val OutlinedTextFieldTopPadding = 8.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomOutlinedTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    prefix: @Composable (() -> Unit)? = null,
    suffix: @Composable (() -> Unit)? = null,
    supportingText: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = OutlinedTextFieldDefaults.shape,
    colors: TextFieldColors = OutlinedTextFieldDefaults.colors(),
    //设置内容边距
    contentPadding: PaddingValues = contentPadding(),
) {
    // If color is not provided via the text style, use content color as a default
    val textColor = textStyle.color.takeOrElse {
        textColor(enabled, isError, interactionSource).value
    }
    val mergedTextStyle = textStyle.merge(TextStyle(color = textColor))

    CompositionLocalProvider(LocalTextSelectionColors provides LocalTextSelectionColors.current) {
        BasicTextField(
            value = value,
            modifier = if (label != null) {
                modifier
                    // Merge semantics at the beginning of the modifier chain to ensure padding is
                    // considered part of the text field.
                    .semantics(mergeDescendants = true) {}
                    .padding(top = OutlinedTextFieldTopPadding)
            } else {
                modifier
            }
                .defaultErrorSemantics(isError, "error")
                .defaultMinSize(
                    minWidth = OutlinedTextFieldDefaults.MinWidth,
                    minHeight = OutlinedTextFieldDefaults.MinHeight
                ),
            onValueChange = onValueChange,
            enabled = enabled,
            readOnly = readOnly,
            textStyle = mergedTextStyle,
            cursorBrush = SolidColor(cursorColor(isError).value),
            visualTransformation = visualTransformation,
            keyboardOptions = keyboardOptions,
            keyboardActions = keyboardActions,
            interactionSource = interactionSource,
            singleLine = singleLine,
            maxLines = maxLines,
            minLines = minLines,
            decorationBox = @Composable { innerTextField ->
                OutlinedTextFieldDefaults.DecorationBox(
                    value = value,
                    visualTransformation = visualTransformation,
                    innerTextField = innerTextField,
                    placeholder = placeholder,
                    label = label,
                    leadingIcon = leadingIcon,
                    trailingIcon = trailingIcon,
                    prefix = prefix,
                    suffix = suffix,
                    supportingText = supportingText,
                    singleLine = singleLine,
                    enabled = enabled,
                    isError = isError,
                    interactionSource = interactionSource,
                    colors = colors,
                    contentPadding = contentPadding,
                    container = {
                        OutlinedTextFieldDefaults.ContainerBox(
                            enabled,
                            isError,
                            interactionSource,
                            colors,
                            shape
                        )
                    }
                )
            }
        )
    }
}

internal fun Modifier.defaultErrorSemantics(
    isError: Boolean,
    defaultErrorMessage: String,
): Modifier = if (isError) semantics { error(defaultErrorMessage) } else this

@Composable
internal fun cursorColor(isError: Boolean): State<Color> {
    return rememberUpdatedState(
        if (isError) Color(
            red = 179,
            green = 38,
            blue = 30
        ) else Color(red = 103, green = 80, blue = 164)
    )
}

@Composable
fun textColor(
    enabled: Boolean,
    isError: Boolean,
    interactionSource: InteractionSource
): State<Color> {
    val focused by interactionSource.collectIsFocusedAsState()

    val targetValue = when {
        !enabled -> Color(red = 28, green = 27, blue = 31)
        isError -> Color(red = 28, green = 27, blue = 31)
        focused -> Color(red = 28, green = 27, blue = 31)
        else -> Color(red = 28, green = 27, blue = 31)
    }
    return rememberUpdatedState(targetValue)
}

方法二:基于

BasicTextField 自定义
OutlinedTextFieldDefaults.DecorationBox
//            BasicTextField(
//                value = text,
//                onValueChange = { text = it },
//                modifier = Modifier
//                    .height(36.dp),
//                singleLine = true,
//            ) { innerTextField ->
//                OutlinedTextFieldDefaults.DecorationBox(
//                    value = text,
//                    innerTextField = innerTextField,
//                    enabled = true,
//                    singleLine = true,
//                    label = { Text("工号", modifier = Modifier.padding(0.dp)) },
//                    visualTransformation = VisualTransformation.None,
//                    interactionSource = interactionSource,
//                    contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
//                        top = 0.dp,
//                        bottom = 0.dp
//                    )
//                )
//            }

使用

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值