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

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

Jetpack compose basic textfield no cursor

问题

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

原谅我如果我现在问了一个非常愚蠢的问题，但我对Compose还很新。我试图创建一个类似我想要的BasicTextField，但由于某种原因，当我选择了TextField并且键盘显示时，光标不会闪烁。我在普通的TextField中看到了它，但我不喜欢默认的外观。我是不是漏掉了某一行或某些内容？谢谢

fun CustomSearchField(state: MutableState<TextFieldValue>) {
    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

    BasicTextField(
        value = state.value,
        onValueChange = { value ->
            state.value = value
        },
        singleLine = true,
        cursorBrush = SolidColor(Color.White),
        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
        keyboardActions = KeyboardActions(
            onDone = {
                keyboardController?.hide()
                focusManager.clearFocus()
            }
        ),
        decorationBox = {
            Row(
                horizontalArrangement = Arrangement.spacedBy(8.dp),
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .padding(horizontal = 16.dp)
                    .fillMaxWidth()
                    .heightIn(48.dp)
                    .clip(shape = RoundedCornerShape(8.dp))
                    .border(
                        BorderStroke(
                            1.dp, colorResource(R.color.cardBorder)
                        ), shape = RoundedCornerShape(8.dp)
                    )
            ) {
                Image(
                    painter = painterResource(id = R.drawable.ic_search_icon),
                    contentDescription = null,
                    contentScale = ContentScale.Crop,
                    colorFilter = ColorFilter.tint(colorResource(if (state.value == TextFieldValue("")) R.color.mainGray else R.color.primaryTextColor)),
                    modifier = Modifier
                        .padding(start = 16.dp)
                        .size(24.dp)
                )

                if (state.value == TextFieldValue("")) {
                    /*Text(
                        text = "Search",
                        style = poppinsRegular(14),
                        color = colorResource(id = R.color.mainGray),
                        modifier = Modifier
                            .weight(1f)
                    )*/
                } else {
                    Text(
                        text = state.value.text,
                        style = poppinsRegular(14),
                        color = colorResource(id = R.color.primaryTextColor),
                        modifier = Modifier
                            .weight(1f)
                    )
                }

                if (state.value != TextFieldValue("")) {
                    IconButton(
                        onClick = {
                            state.value =
                                TextFieldValue("")
                        }
                    ) {
                        Image(
                            painter = painterResource(id = R.drawable.clear_icon),
                            contentDescription = null,
                            contentScale = ContentScale.Crop,
                            colorFilter = ColorFilter.tint(colorResource(R.color.primaryTextColor)),
                            modifier = Modifier
                                .size(24.dp)
                                .padding(2.dp)
                        )
                    }
                }
            }
        }
    }
}
英文:

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

fun CustomSearchField(state: MutableState&lt;TextFieldValue&gt;) {
val focusManager = LocalFocusManager.current
val keyboardController = LocalSoftwareKeyboardController.current
BasicTextField(
value = state.value,
onValueChange = { value -&gt;
state.value = value
},
singleLine = true,
cursorBrush = SolidColor(Color.White),
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(
onDone = {
keyboardController?.hide()
focusManager.clearFocus()
}
),
decorationBox = {
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth()
.heightIn(48.dp)
.clip(shape = RoundedCornerShape(8.dp))
.border(
BorderStroke(
1.dp, colorResource(R.color.cardBorder)
), shape = RoundedCornerShape(8.dp)
)
) {
Image(
painter = painterResource(id = R.drawable.ic_search_icon),
contentDescription = null,
contentScale = ContentScale.Crop,
colorFilter = ColorFilter.tint(colorResource(if (state.value == TextFieldValue(&quot;&quot;)) R.color.mainGray else R.color.primaryTextColor)),
modifier = Modifier
.padding(start = 16.dp)
.size(24.dp)
)
if (state.value == TextFieldValue(&quot;&quot;)) {
/*Text(
text = &quot;Search&quot;,
style = poppinsRegular(14),
color = colorResource(id = R.color.mainGray),
modifier = Modifier
.weight(1f)
)*/
} else {
Text(
text = state.value.text,
style = poppinsRegular(14),
color = colorResource(id = R.color.primaryTextColor),
modifier = Modifier
.weight(1f)
)
}
if (state.value != TextFieldValue(&quot;&quot;)) {
IconButton(
onClick = {
state.value =
TextFieldValue(&quot;&quot;)
}
) {
Image(
painter = painterResource(id = R.drawable.clear_icon),
contentDescription = null,
contentScale = ContentScale.Crop,
colorFilter = ColorFilter.tint(colorResource(R.color.primaryTextColor)),
modifier = Modifier
.size(24.dp)
.padding(2.dp)
)
}
}
}
}

答案1

得分: 1

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

cursorBrush = SolidColor(Color.White)
英文:

White brush color might be the culprit here.

cursorBrush = SolidColor(Color.White)

答案2

得分: 0

  1. 光标颜色是白色：
cursorBrush = SolidColor(Color.Black),
  1. decorationBox 接受一个带有文本框和文本控件的参数。在 decorationBox 函数中，你需要添加 innerTextField -> 以指定该参数的名称。然后，在行内，你需要调用这个组合。
decorationBox = {
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .padding(horizontal = 16.dp)
            .fillMaxWidth()
            .heightIn(48.dp)
            .clip(shape = RoundedCornerShape(8.dp))
            .border(
                BorderStroke(
                    1.dp, colorResource(R.color.cardBorder)
                ), shape = RoundedCornerShape(8.dp)
            )
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_search_icon),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            colorFilter = ColorFilter.tint(colorResource(if (state.value == TextFieldValue("")) R.color.mainGray else R.color.primaryTextColor)),
            modifier = Modifier
                .padding(start = 16.dp)
                .size(24.dp)
        )
    
        if (state.value == TextFieldValue("")) {
            /*Text(
                text = "Search",
                style = poppinsRegular(14),
                color = colorResource(id = R.color.mainGray),
                modifier = Modifier
                    .weight(1f)
            )*/
        } else {
            innerTextField() // <--- 在这里
        }
    
        if (state.value != TextFieldValue("")) {
            IconButton(
                onClick = {
                    state.value =
                        TextFieldValue("")
                }
            ) {
                Image(
                    painter = painterResource(id = R.drawable.clear_icon),
                    contentDescription = null,
                    contentScale = ContentScale.Crop,
                    colorFilter = ColorFilter.tint(colorResource(R.color.primaryTextColor)),
                    modifier = Modifier
                        .size(24.dp)
                        .padding(2.dp)
                )
            }
        }
    }
}
英文:

There are two issues:

  1. The cursor color is white:
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.

decorationBox = {
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp),
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier
.padding(horizontal = 16.dp)
.fillMaxWidth()
.heightIn(48.dp)
.clip(shape = RoundedCornerShape(8.dp))
.border(
BorderStroke(
1.dp, colorResource(R.color.cardBorder)
), shape = RoundedCornerShape(8.dp)
)
) {
Image(
painter = painterResource(id = R.drawable.ic_search_icon),
contentDescription = null,
contentScale = ContentScale.Crop,
colorFilter = ColorFilter.tint(colorResource(if (state.value == TextFieldValue(&quot;&quot;)) R.color.mainGray else R.color.primaryTextColor)),
modifier = Modifier
.padding(start = 16.dp)
.size(24.dp)
)
if (state.value == TextFieldValue(&quot;&quot;)) {
/*Text(
text = &quot;Search&quot;,
style = poppinsRegular(14),
color = colorResource(id = R.color.mainGray),
modifier = Modifier
.weight(1f)
)*/
} else {
innerTextField() // &lt;--- HERE
}
if (state.value != TextFieldValue(&quot;&quot;)) {
IconButton(
onClick = {
state.value =
TextFieldValue(&quot;&quot;)
}
) {
Image(
painter = painterResource(id = R.drawable.clear_icon),
contentDescription = null,
contentScale = ContentScale.Crop,
colorFilter = ColorFilter.tint(colorResource(R.color.primaryTextColor)),
modifier = Modifier
.size(24.dp)
.padding(2.dp)
)
}
}
}
}
</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:

确定