更改Jetpack Compose中OutlinedTextField的边框厚度

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

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.

  1. @Composable
  2. fun CustomTextField(
  3.     modifier: Modifier = Modifier,
  4.     readOnly: Boolean = false,
  5.     value: String?,
  6.     onValueChange: (String) -> Unit,
  7.     maxLength: Int = 50,
  8.     isValid: ((String) -> Boolean)? = null,
  9.     label: String? = null,
  10.     keyboardType: KeyboardType = KeyboardType.Text,
  11.     imeAction: ImeAction = ImeAction.Done,
  12.     maxLines: Int = 1,
  13.     trailingIcon: @Composable (() -> Unit)? = null,
  14.     shape: Shape = MaterialTheme.shapes.extraLarge,
  15.     labelColor: Color? = null,
  16.     containerColor: Color = MaterialTheme.colorScheme.primary.copy(0.1f),
  17.     focusedBorderColor: Color = MaterialTheme.colorScheme.primary,
  18.     unfocusedBorderColor: Color = MaterialTheme.colorScheme.primary.copy(0.75f),
  19.     placeholder: String? = null
  20. ) {
  21.  
  22.   
  23.     OutlinedTextField(
  24.         readOnly = readOnly,
  25.         value = value ?: "",
  26.         onValueChange = { text ->
  27.             if (text.length <= maxLength) {
  28.                 onValueChange(text)
  29.             }
  30.         },
  31.         textStyle = MaterialTheme.typography.bodyMedium,
  32.         label = {
  33.             label?.let {
  34.                 CustomText(
  35.                     text = label,
  36.                     style = MaterialTheme.typography.labelMedium,
  37.                     color = labelColor,
  38.                     fontSize = 12.sp,
  39.                     fontWeight = FontWeight.Bold
  40.                 )
  41.             }
  42.         },
  43.         placeholder = {
  44.             placeholder?.let {
  45.                 CustomText(
  46.                     text = placeholder,
  47.                     style = MaterialTheme.typography.bodyMedium.copy(color = Color.Gray),
  48.                     color = Color.Gray
  49.                 )
  50.             }
  51.         },
  52.        
  53.         singleLine = maxLines == 1,
  54.         maxLines = maxLines,
  55.         colors = TextFieldDefaults.outlinedTextFieldColors(
  56.             containerColor = containerColor,
  57.             focusedBorderColor = focusedBorderColor,
  58.             unfocusedBorderColor = unfocusedBorderColor,
  59.         ),
  60.         trailingIcon = trailingIcon
  61.     )
  62. }

答案1

得分: 3

使用M3，您可以使用BasicTextField + OutlinedTextFieldDefaults.DecorationBox。

对于container参数，您可以使用OutlinedTextFieldDefaults.ContainerBox创建自定义容器，它允许您自定义**focusedBorderThickness和unfocusedBorderThickness**的值：

  1. BasicTextField(
  2.     value = value,
  3.     onValueChange = { value = it },
  4.     interactionSource = interactionSource,
  5.     enabled = true,
  6.     singleLine = singleLine,
  7. ) {
  8.     OutlinedTextFieldDefaults.DecorationBox(
  9.         value = value,
  10.         innerTextField = it,
  11.         singleLine = singleLine,
  12.         enabled = true,
  13.         label = { Text("标签") },
  14.         placeholder = { Text("占位符") },
  15.         visualTransformation = VisualTransformation.None,
  16.         interactionSource = interactionSource,
  17.         colors = OutlinedTextFieldDefaults.colors(),
  18.         container = {
  19.             OutlinedTextFieldDefaults.ContainerBox(
  20.                 enabled,
  21.                 isError,
  22.                 interactionSource,
  23.                 colors,
  24.                 shape,
  25.                 focusedBorderThickness = 4.dp,
  26.                 unfocusedBorderThickness = 4.dp
  27.             )
  28.         }
  29.     )
  30. }

更改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:

  1.         BasicTextField(
  2.             value = value,
  3.             onValueChange = { value = it },
  4.             interactionSource = interactionSource,
  5.             enabled = true,
  6.             singleLine = singleLine,
  7.         ) {
  8.             OutlinedTextFieldDefaults.DecorationBox(
  9.                 value = value,
  10.                 innerTextField = it,
  11.                 singleLine = singleLine,
  12.                 enabled = true,
  13.                 label = { Text("Label") },
  14.                 placeholder = { Text("Placeholder") },
  15.                 visualTransformation = VisualTransformation.None,
  16.                 interactionSource = interactionSource,
  17.                 colors = OutlinedTextFieldDefaults.colors(),
  18.                 container = {
  19.                     OutlinedTextFieldDefaults.ContainerBox(
  20.                         enabled,
  21.                         isError,
  22.                         interactionSource,
  23.                         colors,
  24.                         shape,
  25.                         focusedBorderThickness = 4.dp,
  26.                         unfocusedBorderThickness = 4.dp
  27.                     )
  28.                 }
  29.             )
  30.         }

更改Jetpack Compose中OutlinedTextField的边框厚度

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

发表评论

匿名网友

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

确定