标签: android-compose-textfield

我正在尝试在 Jetpack 中创建一个带有下划线但没有任何其他边框或背景的 TextField。我该怎么做呢？

这是我当前使用的代码：

val query = remember {mutableStateOf("")}
        TextField(
        value = query.value,
            onValueChange = { newValue -> query.value = newValue },
            label={Text("Dummy", color = colorResource(id = R.color.fade_green))},
            textStyle = TextStyle(
                textAlign = TextAlign.Start,
                color = colorResource(id = R.color.fade_green),
                fontFamily = FontFamily(Font(R.font.poppins_regular)),
                fontSize = 14.sp,
            ),
            modifier = Modifier
                .padding(start = 30.dp).border(0.dp, Color.Red),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent
            )
            )

想为电话号码创建文本字段。需要帮助将字段中的光标设置为始终位于字符串末尾

我想要做什么：当在字段中获得新数字时，我获取已输入的所有数字，然后附加下划线（_）以获得至少11个字符串长度，然后通过子字符串返回带有数字或“_”的字符串：

return "+7(${template.substring(1, 4)}) ${template.substring(4,7)} ${template.substring(7,9)} ${template.substring(9, 11)}" 如果光标始终位于末尾，则它可以工作，但如果不是，则数字顺序被破坏

完整代码：

@Composeble

@Composable
fun PhoneNumberEditText(
    phoneNumState: MutableState<String>,
    modifier: Modifier = Modifier,
    imeAction: ImeAction = ImeAction.Done,
    onImeAction: () -> Unit = {}
) {
    TextField(
        shape = RoundedCornerShape(16.dp),
        value = phoneNumState.value,
        onValueChange = { value ->
            phoneNumState.value = value
            val digits = phoneNumState.value.toCharArray().filter { it.isDigit() }
            phoneNumState.value = phoneNumTemplate(digits)
        },
        modifier = modifier
            .clip(RoundedCornerShape(16.dp))
            .size(343.dp, 54.dp),
        singleLine = true,
        placeholder = {
            Text(
                "+7(___)_______", style = passwordTextStyle,
            )
        },
        colors = …

我正在尝试制作一些使用与下图相同概念的东西；

类似背景的图像，上面有文字。

我尝试制作一张卡片并为其指定图像的背景颜色，但出现错误；

我想要做的是在图像上覆盖一些文本，如上图所示。

那么请问我该如何安排这段代码。我需要将所有内容都放在一个可组合项中，因为我需要填充它。

提前感谢您的理解和帮助。

请，我很乐意提供所需的更多信息。

我希望包含按钮和文本的行的宽度与文本字段的宽度相同。这是我尝试过的：

Column(
    modifier = Modifier.fillMaxSize().padding(padding),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    TextField(
        value = email,
        onValueChange = { email = it },
        placeholder = {Text(text = "Email")}
    )
    TextField(
        value = password,
        onValueChange = { password = it },
        placeholder = {Text(text = "Pass")}
    )
    Row {
        Button(
            onClick = {
                start(email, password)
            }
        ) {
            Text(
                text = "Start",
                fontSize = 18.sp
            )
        }
        Spacer(
            modifier = Modifier.weight(1f)
        )
        Text(
            text = "Skip"
        )
    }
}

这就是我得到的： …

我想使用材质图标作为参数将其传递给文本字段。

@Composable
fun NormalTextField(
    icon: () -> Unit,  // how to pass material icon to textField
    label: String
) {
    val (text, setText) = mutableStateOf("")
    TextField(
        leadingIcon = icon,
        value = text,
        onValueChange = setText,
        label = label
    )
}

编辑文本字段时，我想在光标位置显示一个气泡，例如

我正在尝试调整可组合项中标签的开始填充TextSearchBar。

我知道一种选择是使用BasicTextField可组合项，但我想避免这种情况并通过添加来使用contentPadding参数（jeran 在下面的帖子中提到）。decorationBoxandroidx.compose.material:material:1.2.0-alpha04

我在添加decorationBox 时遇到困难（不太熟悉lambda 参数函数的工作原理）。请帮助我如何实现decorationBox来调整标签文本的开始填充？

删除 jetpack compose textfield 上的默认填充。

@Composable
fun TextSearchBar(
    modifier: Modifier = Modifier,
    value: String,
    label: String,
    onDoneActionClick: () -> Unit = {},
    onClearClick: () -> Unit = {},
    onFocusChanged: (FocusState) -> Unit = {},
    onValueChanged: (String) -> Unit,
) {
    TextField(
        value = value,
        onValueChange = { query ->
            onValueChanged(query)
        },
        modifier = modifier
            .padding(horizontal = 4.dp, vertical = 0.dp)
            .fillMaxWidth()
            .onFocusChanged { onFocusChanged(it) }, …

到目前为止我的解决方案是使用Transparent光标的颜色。
我正在寻找更好的方法来隐藏它（如果有的话）。

cursorBrush = SolidColor(Transparent)

TextField 应该获得焦点，键盘应该打开并且用户应该能够键入输入。

问题是TextFieldCursorHandle输入文本后我仍然可以看到。

我需要使用资源来支持不同的颜色BuildVars，所以我有Color.kt定义颜色的文件，问题是如果我从colors.xml这样的资源中获取颜色

val MyWhiteColor: Color = Color(R.color.my_white_color)

并像这样使用它

    Text(
        text = ...,
        style = TextStyle(
            color = MyWhiteColor
        )
    )

但是，如果我将实现更改为，我会得到蓝色而不是白色

val MyWhiteColor: Color = Color(android.graphics.Color.parseColor("#FFFFFF"))

它按预期工作，我得到白色。

我缺少什么？colors.xml为什么当我从颜色中获取值时会转换为蓝色？

我现在正在使用 AnnotedStrings 创建具有两种不同文本样式的文本：

我正在使用 SpanStyle 设置此标签。如何以这种方式设置行高？因为SpanStyle缺少这个属性。