如何移除Jetpack Compose中OutlinedTextField的内部空白区域？

我认为这是默认内边距。我尝试了所有与添加和移除默认内边距相关的方法，但均无效，且我使用OutlinedTextField是因为可以轻松结合LocalFocusManager使用

现有代码 #

OutlinedTextField(
            modifier = Modifier
                .size(widthInDp, heightInDp)
                .focusRequester(item1)
                .onKeyEvent {
                    if (it.key.nativeKeyCode == 67) {
                        otp1 = ""
                        item1.freeFocus()
                        true
                    } else {
                        false
                    }
                },
            value = otp1,
            maxLines = 1,
            singleLine = true,
            shape = RoundedCornerShape(cornerRadius),
            visualTransformation = if (passwordToggle) PasswordVisualTransformation() else VisualTransformation.None,
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.NumberPassword,
                imeAction = ImeAction.Next
            ),
            textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.Center, color = Color.Black, fontWeight = FontWeight.Bold, fontSize =if(conf.screenWidthDp<350){8.sp}else{14.sp}),
            colors = TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = focusColor,
                unfocusedBorderColor =if (otp1.length == 1) {focusColor}else{unfocusColor}
            ),
            onValueChange = {
                if (it.length <= 1) {
                    otp1 = it
                    item1.freeFocus()
                    item2.requestFocus()
                }
            },
        )

解决方案 #

方法1：自定义DecorationBox（推荐）

通过替换默认的decorationBox，直接控制内边距参数，这是最灵活且符合Compose设计规范的方式：

OutlinedTextField(
    modifier = Modifier
        .size(widthInDp, heightInDp)
        .focusRequester(item1)
        .onKeyEvent {
            if (it.key.nativeKeyCode == 67) {
                otp1 = ""
                item1.freeFocus()
                true
            } else {
                false
            }
        },
    value = otp1,
    maxLines = 1,
    singleLine = true,
    shape = RoundedCornerShape(cornerRadius),
    visualTransformation = if (passwordToggle) PasswordVisualTransformation() else VisualTransformation.None,
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.NumberPassword,
        imeAction = ImeAction.Next
    ),
    textStyle = LocalTextStyle.current.copy(
        textAlign = TextAlign.Center,
        color = Color.Black,
        fontWeight = FontWeight.Bold,
        fontSize = if(conf.screenWidthDp<350) 8.sp else 14.sp
    ),
    onValueChange = {
        if (it.length <= 1) {
            otp1 = it
            item1.freeFocus()
            item2.requestFocus()
        }
    },
    // 自定义DecorationBox控制内边距
    decorationBox = { innerTextField ->
        TextFieldDefaults.outlinedTextFieldDecorationBox(
            value = otp1,
            innerTextField = innerTextField,
            enabled = true,
            singleLine = true,
            visualTransformation = if (passwordToggle) PasswordVisualTransformation() else VisualTransformation.None,
            // 调整这里的contentPadding到你需要的数值，比如vertical设为0.dp
            contentPadding = PaddingValues(vertical = 0.dp, horizontal = 16.dp),
            label = null,
            placeholder = null,
            leadingIcon = null,
            trailingIcon = null,
            focusedBorder = TextFieldDefaults.outlinedBorder(
                focusedBorderColor = focusColor,
                shape = RoundedCornerShape(cornerRadius)
            ),
            unfocusedBorder = TextFieldDefaults.outlinedBorder(
                unfocusedBorderColor = if (otp1.length == 1) focusColor else unfocusColor,
                shape = RoundedCornerShape(cornerRadius)
            )
        )
    }
)

方法2：使用负padding抵消默认内边距

如果只需要快速调整，也可以给Modifier添加负padding来抵消默认内边距，注意这种方式可能会导致文本与边框重叠，需要根据实际情况调整数值：

modifier = Modifier
    .size(widthInDp, heightInDp)
    .padding(vertical = -4.dp) // 根据默认内边距调整负值大小
    .focusRequester(item1)
    .onKeyEvent { /* ... */ },

内容的提问来源于stack exchange，提问作者Kawan Osman