原因:
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
// )
// )
// }
使用