在 TextField 中请求 Jetpack 中的焦点

发布于 2025-01-10 17:44:48 字数 1051 浏览 0 评论 0原文

这就是我的可组合项的样子,

@Composable
fun MyComposable(
 email:String?,
 onEmailChanged:(email)-> Unit,
 buttonClicked:()->Unit,
 validEmail:Boolean
){
    val focusRequester = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

    TextField(
      modifier = Modifier
        .fillMaxWidth()
        .focusRequester(focusRequester = focusRequester),
      value = email ?: "",
      status = someStatus // Default, Error, Success
      onValueChange = { email -> onEmailChanged(email)},
    )
    Button(
      onClick = {
        focusManager.clearFocus()
        buttonClicked()
        if(!validEmail) focusRequester.requestFocus()
      },
    ) {
      Text(text = "Button")
    }
  }
}

我已经添加了基本代码进行解释,单击按钮时我遇到 focusRequester 问题。

出于可访问性原因,单击按钮后,如果电子邮件无效,我希望焦点返回到 TextField ,以便可访问性可以宣布其状态和标签。

我尝试清除焦点然后再次请求它,但它只在第一次有效。我希望每次单击按钮且电子邮件无效时 TextField 都能获得焦点。

我在这里错过了什么吗?

This his how my composable looks like

@Composable
fun MyComposable(
 email:String?,
 onEmailChanged:(email)-> Unit,
 buttonClicked:()->Unit,
 validEmail:Boolean
){
    val focusRequester = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

    TextField(
      modifier = Modifier
        .fillMaxWidth()
        .focusRequester(focusRequester = focusRequester),
      value = email ?: "",
      status = someStatus // Default, Error, Success
      onValueChange = { email -> onEmailChanged(email)},
    )
    Button(
      onClick = {
        focusManager.clearFocus()
        buttonClicked()
        if(!validEmail) focusRequester.requestFocus()
      },
    ) {
      Text(text = "Button")
    }
  }
}

I have added the basic code for explanation, i am facing issue with focusRequester when a button is clicked.

For accessibility reasons once the button is clicked, and if the email is invalid, i would like the focus to go back to TextField so that accessibility can announce it's state and label.

I tried clearing the focus and then requesting it again, but it only works for the first time. And i would like the TextField to gain focus every-time a button is clicked and email is invalid.

Am i missing something here?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

阳光的暖冬 2025-01-17 17:44:48

单击 button 后,如果 TextField 已经聚焦,我找不到任何方法将焦点重新集中在 TextField 上。

我最终使用 live-region 进行公告。

TextField(
      modifier = Modifier
        .fillMaxWidth()
        .semantics {
          liveRegion = LiveRegionMode.Assertive
        }),
      value = email ?: "",
      status = someStatus // Default, Error, Success
      onValueChange = { email -> onEmailChanged(email)},
    )
    Button(
      onClick = {
        focusManager.clearFocus()
        buttonClicked()
      },
    ) {
      Text(text = "Button")
    }
  }

I couldn't find any way to get the focus back on TextField if it was already focused, once the button was clicked.

I ended up using live-region for announcement.

TextField(
      modifier = Modifier
        .fillMaxWidth()
        .semantics {
          liveRegion = LiveRegionMode.Assertive
        }),
      value = email ?: "",
      status = someStatus // Default, Error, Success
      onValueChange = { email -> onEmailChanged(email)},
    )
    Button(
      onClick = {
        focusManager.clearFocus()
        buttonClicked()
      },
    ) {
      Text(text = "Button")
    }
  }
人心善变 2025-01-17 17:44:48
  1. 试试这个它工作得很好。

@Composable
fun Test() {
    val context = LocalContext.current
    val emailState = remember { mutableStateOf("") }
    val focusRequester = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current

    Column {
        TextField(
            modifier = Modifier
                .focusRequester(focusRequester)
                .fillMaxWidth(),
            value = emailState.value,
            onValueChange = {
                emailState.value = it
            },
        )
        Button(onClick = {
            focusManager.clearFocus()
            if (emailState.value.isEmpty() ) {
                focusRequester.requestFocus()
                Toast.makeText(context, "error", Toast.LENGTH_SHORT).show()
            }
        }) { Text(text = "Button")
        }
    }
}

输入图片此处描述

  1. try this it works totally fine.

@Composable
fun Test() {
    val context = LocalContext.current
    val emailState = remember { mutableStateOf("") }
    val focusRequester = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current

    Column {
        TextField(
            modifier = Modifier
                .focusRequester(focusRequester)
                .fillMaxWidth(),
            value = emailState.value,
            onValueChange = {
                emailState.value = it
            },
        )
        Button(onClick = {
            focusManager.clearFocus()
            if (emailState.value.isEmpty() ) {
                focusRequester.requestFocus()
                Toast.makeText(context, "error", Toast.LENGTH_SHORT).show()
            }
        }) { Text(text = "Button")
        }
    }
}

enter image description here

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文