标签: android-compose-textfield

我们如何在 jetpack compose 中实现这一点

我正在做这样的事情

Button(
    elevation = ButtonDefaults.elevation(
        defaultElevation = 0.dp,
        pressedElevation = 8.dp,
        disabledElevation = 0.dp
    ),
    onClick = { onClick },
    shape = RoundedCornerShape(28.dp),
    modifier = modifier
        .fillMaxWidth()
        .shadow(0.dp),
    contentPadding = PaddingValues(15.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
    border = BorderStroke(1.dp, Color.Grey)
) {
    Box(modifier = modifier.fillMaxWidth(),
        contentAlignment = Alignment.Center) {
        Icon(
            imageVector = imageVector,
            modifier = Modifier
                .size(18.dp),
            contentDescription = "drawable icons",
            tint = Color.Unspecified
        )
        Spacer(modifier = Modifier.width(10.dp))
        Text(
            text = buttonText,
            color = Color.Black,
            textAlign …

我正在尝试在我的 Compose 应用程序中实现搜索栏。我有一个文本字段，当我在文本字段外部单击时，我想失去焦点并隐藏键盘。但是，我不知道该怎么做。我确实尝试过这样做，我在 GitHub 上看到了这一点。

不过，我做了一些改变。原始解决方案使用了这部分代码 isHintDisplayed = it != FocusState.Active，但似乎已被弃用。所以我把它改成了isHintDisplayed = it.isFocused != true理论上应该做同样的事情。如果我恢复到旧版本的 compose 并使用 FocusState.Active，焦点/取消焦点可以完美工作，但我无法让它与我的代码一起使用。

有任何想法吗？

这是我的代码：

@Composable
fun ListScreen(
    navController: NavController
) {
    Surface(
        color = MaterialTheme.colors.background,
        modifier = Modifier.fillMaxSize()
    ) {
        Column {
            Spacer(modifier = Modifier.height(20.dp))
            Image(
                painter = painterResource(id = R.drawable.ic_international_pok_mon_logo),
                contentDescription = "Cards",
                modifier = Modifier
                    .fillMaxWidth()
                    .align(CenterHorizontally)
            )
            SearchBar(
                hint = "Search",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {

            }
        }
    }
}

这是搜索栏：

@Composable
fun SearchBar(
    modifier: Modifier …

在材料设计中TextField 页面 TextField具有以下属性

辅助元素提供有关在文本字段中输入的文本的更多详细信息。

1. 帮助文本 帮助文本传达有关输入字段的附加指导，例如如何使用它。它应该只占据一行，持续可见或仅在焦点上可见。

2. 错误消息 当不接受文本输入时，错误消息会显示有关如何修复它的说明。错误消息显示在输入行下方，替换帮助文本直到修复。

3. 图标 图标也可用于发送警报消息。将它们与错误消息配对以提供冗余警报，这在您需要为色盲用户进行设计时非常有用。

4. 字符计数器 如果存在字符或字数限制，则应使用字符或字数计数器。它们显示所用字符的比率和总字符限制。

Jetpack Compose TextField截至目前，这些属性是否存在compose 1.0.0-alpha09？

我想限制用户可以在 Jetpack Compose 的 TextField 中输入的内容。我怎么做？

xml 中的等效项是inputType：

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="number"
    android:hint="Only numbers please!" />

我需要在 jetpack compose 中使用一个与如下掩码配合使用的文本字段：NNNNN-NNN其中 N 是从 0 到 9 的整数。我需要我的可组合函数在以下位置包含此掩码OutlinedTextField：

@Composable
private fun EditTextField(
    labelText: String,
    value: String,
    keyboardType: KeyboardType = KeyboardType.Text,
    onValueChanged: (String) -> Unit
) {
    OutlinedTextField(
        modifier = Modifier.padding(top = 8.dp),
        label = { Text(text = labelText) },
        keyboardOptions = KeyboardOptions(keyboardType = keyboardType),
        value = value,
        onValueChange = onValueChanged
    )
}

我想在一行中包含两个文本，其中第一个文本的宽度达到第二个文本的开头，如下所示

我正在尝试修改权重，但获得的结果并不相同。有没有办法通过使用 Row 本身而不是 ConstraintLayout 来做到这一点。

编辑 ：

Row(modifier = Modifier.fillMaxWidth()) {
          Text(
            "Some long title abcd efgh ijkl mnop qrst uvwx yzzzzz Some long title abcd efgh ijkl mnop qrst uvwx yzzzzz",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.weight(5f)
          )
          Text("View all", modifier = Modifier.weight(1f))
        }

这有效，如果我遗漏了什么，请提出更好的解决方案。

编辑2：它给了我这样的结果： 我希望标题从行的开头开始

目前我正在使用 android jetpack 撰写 BasicTextField。当我更改光标颜色时，我希望光标手柄也会更改为相同的颜色。但结果却是不同的颜色。这是一个错误还是我设置错误？

这是我设置的

colors = TextFieldDefaults.textFieldColors(
    backgroundColor = Color.Transparent,
    focusedIndicatorColor = colorResource(id = R.color.accent),
    unfocusedIndicatorColor = colorResource(id = R.color.lightest_grey),
    focusedLabelColor = colorResource(id = R.color.secondary_20),
    unfocusedLabelColor = colorResource(id = R.color.light_grey),
    textColor = colorResource(id = R.color.secondary),
    cursorColor = colorResource(id = R.color.secondary),
  )

我想删除 TextField 的紫色线条/指示器（见下图）。这是可能的还是我应该创建自己的自定义 TextField 来实现这一目标？

在 Android 模拟器中，使用计算机键盘输入，但我键盘上的“Enter”键应该接受输入并执行操作。相反，输入允许我进入下一行，并继续继续下一行（作为新行字符）。请在 TextField 元素的 Android Jetpack Composable 中向我建议您的答案。

我想将自定义下划线样式应用于带下划线的文本。我们可以在里面改变吗TextDecoration.underline？

textStyle = MaterialTheme.typography.titleMedium.copy(
    textAlign = TextAlign.Start,
    fontWeight = FontWeight.W600,
    color = color,
    textDecoration = TextDecoration.Underline
)