更改Jetpack Compose中OutlinedTextField的边框厚度

huangapple go评论71阅读模式
英文:

Change OutlinedTextField border thickness in jetpack compose

问题

我在我的Jetpack Compose项目中有一个自定义的OutlinedTextField,并且我遇到了默认边框厚度的问题。默认边框似乎非常细,我想要改变它的厚度。然而,我找不到任何直接的属性或值来调整边框的厚度。

英文:

I have a custom OutlinedTextField in my Jetpack Compose project, and I'm facing an issue with the default border thickness. The default border appears to be very thin, and I want to change its thickness. However, I couldn't find any direct property or value to adjust the border thickness.

@Composable
fun CustomTextField(
    modifier: Modifier = Modifier,
    readOnly: Boolean = false,
    value: String?,
    onValueChange: (String) -> Unit,
    maxLength: Int = 50,
    isValid: ((String) -> Boolean)? = null,
    label: String? = null,
    keyboardType: KeyboardType = KeyboardType.Text,
    imeAction: ImeAction = ImeAction.Done,
    maxLines: Int = 1,
    trailingIcon: @Composable (() -> Unit)? = null,
    shape: Shape = MaterialTheme.shapes.extraLarge,
    labelColor: Color? = null,
    containerColor: Color = MaterialTheme.colorScheme.primary.copy(0.1f),
    focusedBorderColor: Color = MaterialTheme.colorScheme.primary,
    unfocusedBorderColor: Color = MaterialTheme.colorScheme.primary.copy(0.75f),
    placeholder: String? = null
) {
 
  
    OutlinedTextField(
        readOnly = readOnly,
        value = value ?: "",
        onValueChange = { text ->
            if (text.length <= maxLength) {
                onValueChange(text)
            }
        },
        textStyle = MaterialTheme.typography.bodyMedium,
        label = {
            label?.let {
                CustomText(
                    text = label,
                    style = MaterialTheme.typography.labelMedium,
                    color = labelColor,
                    fontSize = 12.sp,
                    fontWeight = FontWeight.Bold
                )
            }
        },
        placeholder = {
            placeholder?.let {
                CustomText(
                    text = placeholder,
                    style = MaterialTheme.typography.bodyMedium.copy(color = Color.Gray),
                    color = Color.Gray
                )
            }
        },
       
        singleLine = maxLines == 1,
        maxLines = maxLines,
        colors = TextFieldDefaults.outlinedTextFieldColors(
            containerColor = containerColor,
            focusedBorderColor = focusedBorderColor,
            unfocusedBorderColor = unfocusedBorderColor,
        ),
        trailingIcon = trailingIcon
    )
}

答案1

得分: 3

使用M3,您可以使用BasicTextField + OutlinedTextFieldDefaults.DecorationBox

对于container参数,您可以使用OutlinedTextFieldDefaults.ContainerBox创建自定义容器,它允许您自定义**focusedBorderThicknessunfocusedBorderThickness**的值:

BasicTextField(
    value = value,
    onValueChange = { value = it },
    interactionSource = interactionSource,
    enabled = true,
    singleLine = singleLine,
) {
    OutlinedTextFieldDefaults.DecorationBox(
        value = value,
        innerTextField = it,
        singleLine = singleLine,
        enabled = true,
        label = { Text("标签") },
        placeholder = { Text("占位符") },
        visualTransformation = VisualTransformation.None,
        interactionSource = interactionSource,
        colors = OutlinedTextFieldDefaults.colors(),
        container = {
            OutlinedTextFieldDefaults.ContainerBox(
                enabled,
                isError,
                interactionSource,
                colors,
                shape,
                focusedBorderThickness = 4.dp,
                unfocusedBorderThickness = 4.dp
            )
        }
    )
}

更改Jetpack Compose中OutlinedTextField的边框厚度

英文:

With M3, you can use a BasicTextField + OutlinedTextFieldDefaults.DecorationBox.

For the container parameter, you can create a custom container using OutlinedTextFieldDefaults.ContainerBox, which allows you to customize the focusedBorderThickness and the unfocusedBorderThickness values:

        BasicTextField(
            value = value,
            onValueChange = { value = it },
            interactionSource = interactionSource,
            enabled = true,
            singleLine = singleLine,
        ) {
            OutlinedTextFieldDefaults.DecorationBox(
                value = value,
                innerTextField = it,
                singleLine = singleLine,
                enabled = true,
                label = { Text("Label") },
                placeholder = { Text("Placeholder") },
                visualTransformation = VisualTransformation.None,
                interactionSource = interactionSource,
                colors = OutlinedTextFieldDefaults.colors(),
                container = {
                    OutlinedTextFieldDefaults.ContainerBox(
                        enabled,
                        isError,
                        interactionSource,
                        colors,
                        shape,
                        focusedBorderThickness = 4.dp,
                        unfocusedBorderThickness = 4.dp
                    )
                }
            )
        }

更改Jetpack Compose中OutlinedTextField的边框厚度

huangapple
  • 本文由 发表于 2023年6月9日 02:27:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76434722.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定