Jetpack Compose基本文本字段没有光标。

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

Jetpack compose basic textfield no cursor

问题

I'll provide the translated code portion without the comments:

  1. 原谅我如果我现在问了一个非常愚蠢的问题，但我对Compose还很新。我试图创建一个类似我想要的BasicTextField，但由于某种原因，当我选择了TextField并且键盘显示时，光标不会闪烁。我在普通的TextField中看到了它，但我不喜欢默认的外观。我是不是漏掉了某一行或某些内容？谢谢
  3. fun CustomSearchField(state: MutableState<TextFieldValue>) {
  4.     val focusManager = LocalFocusManager.current
  5.     val keyboardController = LocalSoftwareKeyboardController.current
  7.     BasicTextField(
  8.         value = state.value,
  9.         onValueChange = { value ->
  10.             state.value = value
  11.         },
  12.         singleLine = true,
  13.         cursorBrush = SolidColor(Color.White),
  14.         keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
  15.         keyboardActions = KeyboardActions(
  16.             onDone = {
  17.                 keyboardController?.hide()
  18.                 focusManager.clearFocus()
  19.             }
  20.         ),
  21.         decorationBox = {
  22.             Row(
  23.                 horizontalArrangement = Arrangement.spacedBy(8.dp),
  24.                 verticalAlignment = Alignment.CenterVertically,
  25.                 modifier = Modifier
  26.                     .padding(horizontal = 16.dp)
  27.                     .fillMaxWidth()
  28.                     .heightIn(48.dp)
  29.                     .clip(shape = RoundedCornerShape(8.dp))
  30.                     .border(
  31.                         BorderStroke(
  32.                             1.dp, colorResource(R.color.cardBorder)
  33.                         ), shape = RoundedCornerShape(8.dp)
  34.                     )
  35.             ) {
  36.                 Image(
  37.                     painter = painterResource(id = R.drawable.ic_search_icon),
  38.                     contentDescription = null,
  39.                     contentScale = ContentScale.Crop,
  40.                     colorFilter = ColorFilter.tint(colorResource(if (state.value == TextFieldValue("")) R.color.mainGray else R.color.primaryTextColor)),
  41.                     modifier = Modifier
  42.                         .padding(start = 16.dp)
  43.                         .size(24.dp)
  44.                 )
  46.                 if (state.value == TextFieldValue("")) {
  47.                     /*Text(
  48.                         text = "Search",
  49.                         style = poppinsRegular(14),
  50.                         color = colorResource(id = R.color.mainGray),
  51.                         modifier = Modifier
  52.                             .weight(1f)
  53.                     )*/
  54.                 } else {
  55.                     Text(
  56.                         text = state.value.text,
  57.                         style = poppinsRegular(14),
  58.                         color = colorResource(id = R.color.primaryTextColor),
  59.                         modifier = Modifier
  60.                             .weight(1f)
  61.                     )
  62.                 }
  64.                 if (state.value != TextFieldValue("")) {
  65.                     IconButton(
  66.                         onClick = {
  67.                             state.value =
  68.                                 TextFieldValue("")
  69.                         }
  70.                     ) {
  71.                         Image(
  72.                             painter = painterResource(id = R.drawable.clear_icon),
  73.                             contentDescription = null,
  74.                             contentScale = ContentScale.Crop,
  75.                             colorFilter = ColorFilter.tint(colorResource(R.color.primaryTextColor)),
  76.                             modifier = Modifier
  77.                                 .size(24.dp)
  78.                                 .padding(2.dp)
  79.                         )
  80.                     }
  81.                 }
  82.             }
  83.         }
  84.     }
  85. }
英文:

Forgive if I ask something really stupid now but I'm quite new to compose. I'm trying to create a BasicTextField which looks like I want it to but for some reason there is no cursor blinking when I've selected the TextField and the keyboard is showing. I saw it with a normal TextField but I didn't like the looks of the default things. Am I missing a line or something? Thanks

  1. fun CustomSearchField(state: MutableState&lt;TextFieldValue&gt;) {
  2. val focusManager = LocalFocusManager.current
  3. val keyboardController = LocalSoftwareKeyboardController.current
  4. BasicTextField(
  5. value = state.value,
  6. onValueChange = { value -&gt;
  7. state.value = value
  8. },
  9. singleLine = true,
  10. cursorBrush = SolidColor(Color.White),
  11. keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
  12. keyboardActions = KeyboardActions(
  13. onDone = {
  14. keyboardController?.hide()
  15. focusManager.clearFocus()
  16. }
  17. ),
  18. decorationBox = {
  19. Row(
  20. horizontalArrangement = Arrangement.spacedBy(8.dp),
  21. verticalAlignment = Alignment.CenterVertically,
  22. modifier = Modifier
  23. .padding(horizontal = 16.dp)
  24. .fillMaxWidth()
  25. .heightIn(48.dp)
  26. .clip(shape = RoundedCornerShape(8.dp))
  27. .border(
  28. BorderStroke(
  29. 1.dp, colorResource(R.color.cardBorder)
  30. ), shape = RoundedCornerShape(8.dp)
  31. )
  32. ) {
  33. Image(
  34. painter = painterResource(id = R.drawable.ic_search_icon),
  35. contentDescription = null,
  36. contentScale = ContentScale.Crop,
  37. colorFilter = ColorFilter.tint(colorResource(if (state.value == TextFieldValue(&quot;&quot;)) R.color.mainGray else R.color.primaryTextColor)),
  38. modifier = Modifier
  39. .padding(start = 16.dp)
  40. .size(24.dp)
  41. )
  42. if (state.value == TextFieldValue(&quot;&quot;)) {
  43. /*Text(
  44. text = &quot;Search&quot;,
  45. style = poppinsRegular(14),
  46. color = colorResource(id = R.color.mainGray),
  47. modifier = Modifier
  48. .weight(1f)
  49. )*/
  50. } else {
  51. Text(
  52. text = state.value.text,
  53. style = poppinsRegular(14),
  54. color = colorResource(id = R.color.primaryTextColor),
  55. modifier = Modifier
  56. .weight(1f)
  57. )
  58. }
  59. if (state.value != TextFieldValue(&quot;&quot;)) {
  60. IconButton(
  61. onClick = {
  62. state.value =
  63. TextFieldValue(&quot;&quot;)
  64. }
  65. ) {
  66. Image(
  67. painter = painterResource(id = R.drawable.clear_icon),
  68. contentDescription = null,
  69. contentScale = ContentScale.Crop,
  70. colorFilter = ColorFilter.tint(colorResource(R.color.primaryTextColor)),
  71. modifier = Modifier
  72. .size(24.dp)
  73. .padding(2.dp)
  74. )
  75. }
  76. }
  77. }
  78. }

答案1

得分: 1

白色刷子颜色可能是问题的原因。

  1. cursorBrush = SolidColor(Color.White)
英文:

White brush color might be the culprit here.

  1. cursorBrush = SolidColor(Color.White)

答案2

得分: 0

  1. 光标颜色是白色：
  1. cursorBrush = SolidColor(Color.Black),
  1. decorationBox 接受一个带有文本框和文本控件的参数。在 decorationBox 函数中，你需要添加 innerTextField -> 以指定该参数的名称。然后，在行内，你需要调用这个组合。
  1. decorationBox = {
  2.     Row(
  3.         horizontalArrangement = Arrangement.spacedBy(8.dp),
  4.         verticalAlignment = Alignment.CenterVertically,
  5.         modifier = Modifier
  6.             .padding(horizontal = 16.dp)
  7.             .fillMaxWidth()
  8.             .heightIn(48.dp)
  9.             .clip(shape = RoundedCornerShape(8.dp))
  10.             .border(
  11.                 BorderStroke(
  12.                     1.dp, colorResource(R.color.cardBorder)
  13.                 ), shape = RoundedCornerShape(8.dp)
  14.             )
  15.     ) {
  16.         Image(
  17.             painter = painterResource(id = R.drawable.ic_search_icon),
  18.             contentDescription = null,
  19.             contentScale = ContentScale.Crop,
  20.             colorFilter = ColorFilter.tint(colorResource(if (state.value == TextFieldValue("")) R.color.mainGray else R.color.primaryTextColor)),
  21.             modifier = Modifier
  22.                 .padding(start = 16.dp)
  23.                 .size(24.dp)
  24.         )
  25.     
  26.         if (state.value == TextFieldValue("")) {
  27.             /*Text(
  28.                 text = "Search",
  29.                 style = poppinsRegular(14),
  30.                 color = colorResource(id = R.color.mainGray),
  31.                 modifier = Modifier
  32.                     .weight(1f)
  33.             )*/
  34.         } else {
  35.             innerTextField() // <--- 在这里
  36.         }
  37.     
  38.         if (state.value != TextFieldValue("")) {
  39.             IconButton(
  40.                 onClick = {
  41.                     state.value =
  42.                         TextFieldValue("")
  43.                 }
  44.             ) {
  45.                 Image(
  46.                     painter = painterResource(id = R.drawable.clear_icon),
  47.                     contentDescription = null,
  48.                     contentScale = ContentScale.Crop,
  49.                     colorFilter = ColorFilter.tint(colorResource(R.color.primaryTextColor)),
  50.                     modifier = Modifier
  51.                         .size(24.dp)
  52.                         .padding(2.dp)
  53.                 )
  54.             }
  55.         }
  56.     }
  57. }
英文:

There are two issues:

  1. The cursor color is white:
  1. cursorBrush = SolidColor(Color.Black),
  1. decorationBox takes an argument with the text box and text controls. At the decorationBox function, you need to add innerTextField -&gt; to make that the argument name. Then, inside the row, you need to call the composable.
  2. decorationBox = {
  3. Row(
  4. horizontalArrangement = Arrangement.spacedBy(8.dp),
  5. verticalAlignment = Alignment.CenterVertically,
  6. modifier = Modifier
  7. .padding(horizontal = 16.dp)
  8. .fillMaxWidth()
  9. .heightIn(48.dp)
  10. .clip(shape = RoundedCornerShape(8.dp))
  11. .border(
  12. BorderStroke(
  13. 1.dp, colorResource(R.color.cardBorder)
  14. ), shape = RoundedCornerShape(8.dp)
  15. )
  16. ) {
  17. Image(
  18. painter = painterResource(id = R.drawable.ic_search_icon),
  19. contentDescription = null,
  20. contentScale = ContentScale.Crop,
  21. colorFilter = ColorFilter.tint(colorResource(if (state.value == TextFieldValue(&quot;&quot;)) R.color.mainGray else R.color.primaryTextColor)),
  22. modifier = Modifier
  23. .padding(start = 16.dp)
  24. .size(24.dp)
  25. )
  26. if (state.value == TextFieldValue(&quot;&quot;)) {
  27. /*Text(
  28. text = &quot;Search&quot;,
  29. style = poppinsRegular(14),
  30. color = colorResource(id = R.color.mainGray),
  31. modifier = Modifier
  32. .weight(1f)
  33. )*/
  34. } else {
  35. innerTextField() // &lt;--- HERE
  36. }
  37. if (state.value != TextFieldValue(&quot;&quot;)) {
  38. IconButton(
  39. onClick = {
  40. state.value =
  41. TextFieldValue(&quot;&quot;)
  42. }
  43. ) {
  44. Image(
  45. painter = painterResource(id = R.drawable.clear_icon),
  46. contentDescription = null,
  47. contentScale = ContentScale.Crop,
  48. colorFilter = ColorFilter.tint(colorResource(R.color.primaryTextColor)),
  49. modifier = Modifier
  50. .size(24.dp)
  51. .padding(2.dp)
  52. )
  53. }
  54. }
  55. }
  56. }
  57. </details>

huangapple
  • 本文由 发表于 2023年3月31日 04:16:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/75892628.html
  • android
  • android-jetpack-compose
  • kotlin
匿名

发表评论

匿名网友

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

确定