kotlin Jetpack组成：文本字段不会因为在其外部单击而失去焦点

6kkfgxo0 于 2023-04-21 发布在 Kotlin

关注(0)|答案(1)|浏览(158)

我试图在我的撰写应用程序中实现一个搜索栏。我有一个文本字段，当我在文本字段外单击时，我想失去焦点并隐藏键盘。然而，我不知道如何做到这一点。我确实尝试过这样做，我在GitHub上看到了。
然而，我做了一些改变。原来的解决方案使用了这部分代码isHintDisplayed = it != FocusState.Active，这似乎是不推荐的。所以我把它改为isHintDisplayed = it.isFocused != true，理论上应该做同样的事情。如果我回到旧版本的compose并使用FocusState.Active，focus/unfocus工作得很好，但我不能让它与我的代码一起工作。
有什么想法吗
下面是我的代码：

@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)
            ) {

            }
        }
    }
}

这里是Searchbar：

@Composable
fun SearchBar(
    modifier: Modifier = Modifier,
    hint: String = "",
    onSearch: (String) -> Unit = {}
) {
    var text by remember {
        mutableStateOf("")
    }
    var isHintDisplayed by remember {
        mutableStateOf(false)
    }

    Box(modifier = modifier) {
        BasicTextField(
            value = text,
            onValueChange = {
                text = it
                onSearch(it)
            },
            maxLines = 1,
            singleLine = true,
            textStyle = TextStyle(color = Color.Black),
            modifier = Modifier
                .fillMaxWidth()
                .shadow(5.dp, CircleShape)
                .background(Color.White, CircleShape)
                .padding(horizontal = 20.dp, vertical = 12.dp)
                .onFocusChanged {
                    isHintDisplayed = !it.isFocused
                }
        )
        if(isHintDisplayed) {
            Text(
                text = hint,
                color = Color.LightGray,
                modifier = Modifier
                    .padding(horizontal = 20.dp, vertical = 12.dp)
            )
        }
    }
}

kotlin

来源：https://stackoverflow.com/questions/72833025/jetpack-compose-textfield-doesnt-lose-focus-on-click-outside-of-it

1条答案

按热度按时间

ffscu2ro1#

如果你想 * 隐藏键盘 * 和 * 清除焦点 *，你可以通过在TextField中添加KeyboardOptions和KeyboardActions来实现。你可以通过添加任何你想要的ImeAction来实现，例如ImeAction.Search。
如果你想隐藏键盘 * 外部区域点击 *，那么你可以在你的父组合设置一个 *clickable修饰符 *，并通过一个变量管理键盘显示隐藏状态，该变量的状态将在点击父组合时改变。
如果你想管理键盘显示选项和焦点状态，通过键盘操作和外部区域点击，你可以修改你的代码如下。

@Composable
fun ListScreen() {
    Surface(
        color = MaterialTheme.colors.background,
        modifier = Modifier.fillMaxSize()
    ) {
        var hideKeyboard by remember { mutableStateOf(false) }
        Column(modifier = Modifier.clickable { hideKeyboard = true }) {
            Spacer(modifier = Modifier.height(20.dp))
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_foreground),
                contentDescription = "Cards",
                modifier = Modifier
                    .fillMaxWidth()
                    .align(CenterHorizontally)
            )
            SearchBar(
                hint = "Search",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                hideKeyboard = hideKeyboard,
                onFocusClear = { hideKeyboard = false }
            ) {

            }
        }
    }
}

@Composable
fun SearchBar(
    modifier: Modifier = Modifier,
    hint: String = "",
    hideKeyboard: Boolean = false,
    onFocusClear: () -> Unit = {},
    onSearch: (String) -> Unit = {}
) {
    var text by remember {
        mutableStateOf("")
    }
    var isHintDisplayed by remember {
        mutableStateOf(false)
    }
    val focusManager = LocalFocusManager.current

    Box(modifier = modifier.background(color = Color.Red)) {
        BasicTextField(
            value = text,
            onValueChange = {
                text = it
                onSearch(it)
            },
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
            keyboardActions = KeyboardActions(onSearch = {
                focusManager.clearFocus()
                onSearch(text)
            }),
            maxLines = 1,
            singleLine = true,
            textStyle = TextStyle(color = Color.Black),
            modifier = Modifier
                .fillMaxWidth()
                .shadow(5.dp, CircleShape)
                .background(Color.White, CircleShape)
                .padding(horizontal = 20.dp, vertical = 12.dp)
                .onFocusChanged {
                    isHintDisplayed = !it.hasFocus
                }
        )
        if(isHintDisplayed) {
            Text(
                text = hint,
                color = Color.LightGray,
                modifier = Modifier
                    .padding(horizontal = 20.dp, vertical = 12.dp)
            )
        }
    }

    if (hideKeyboard) {
        focusManager.clearFocus()
        // Call onFocusClear to reset hideKeyboard state to false
        onFocusClear()
    }
}

赞(0）回复(0）举报 2023-04-21

我来回答

kotlin Jetpack组成：文本字段不会因为在其外部单击而失去焦点

1条答案

相关问题

热门标签

最新问答