Jetpack Compose：如何检测Composable触摸？实现SearchBar外点击重置焦点

要实现点击SearchBar以外区域（如LazyColumn或空白处）时重置搜索栏焦点、隐藏软键盘并移除光标，可通过以下步骤修改代码：

1. 根布局添加全局点击监听 #

在DashboardScreen的根Column上添加pointerInput修饰符，监听全局点击事件，触发焦点清除、键盘隐藏和ViewModel状态更新：

@Composable
fun DashboardScreen(heroesViewModel: HeroesViewModel = get()) {

    val searchState by heroesViewModel.searchState.collectAsState()
    val uiState by heroesViewModel.uiState.collectAsState()
    val focusRequester = remember { FocusRequester() }
    val focusManager = LocalFocusManager.current
    val keyboardController = LocalSoftwareKeyboardController.current

    Column(
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectTapGestures(onTap = {
                    // 清除所有组件焦点
                    focusManager.clearFocus()
                    // 隐藏软键盘
                    keyboardController?.hide()
                    // 通知ViewModel重置搜索栏状态
                    heroesViewModel.submitEvent(HeroesViewModel.UiEvent.ResetSearchFocus)
                })
            }
    ) {
        // 现有SearchBar代码...
        
        LazyColumn {
            items(uiState.modelsListResponse ?: listOf()) { model ->
                if (model is HeroListSeparatorModel)
                    HeroesListSeparatorItem(model)
                else if (model is HeroesListModel)
                    HeroesListItem(model) {
                        // 点击列表项时同步重置搜索栏状态
                        focusManager.clearFocus()
                        keyboardController?.hide()
                        heroesViewModel.submitEvent(HeroesViewModel.UiEvent.ResetSearchFocus)
                        heroesViewModel.submitEvent(HeroesViewModel.UiEvent.ListItemClicked(model))
                    }
            }
        }
    }
}

2. ViewModel添加状态重置逻辑 #

在HeroesViewModel中新增ResetSearchFocus事件，用于更新SearchState的焦点状态：

class HeroesViewModel : ViewModel() {
    sealed class UiEvent {
        // 现有事件...
        object ResetSearchFocus : UiEvent()
    }

    private val _searchState = mutableStateOf(SearchState("", false, false))
    val searchState: State<SearchState> = _searchState

    fun submitEvent(event: UiEvent) {
        when (event) {
            // 现有事件处理...
            UiEvent.ResetSearchFocus -> {
                _searchState.value = _searchState.value.copy(
                    focused = false
                    // 若需要清空搜索词，可添加 query = ""
                )
            }
        }
    }
}

3. 同步搜索文本框焦点状态 #

在SearchTextField中添加LaunchedEffect监听searchState.focused，确保状态变化时文本框同步失去焦点：

@Composable
fun SearchTextField(
    searchState: SearchState,
    onQueryChanged: (String) -> Unit,
    onSearchFocusChanged: (Boolean) -> Unit,
    onClearQueryClicked: () -> Unit,
    focusRequester : FocusRequester,
    modifier: Modifier = Modifier
) {
    val focused = searchState.focused
    var query = searchState.query
    val searching = searchState.searching
    val focusManager = LocalFocusManager.current

    // 监听焦点状态，当ViewModel标记为未聚焦时主动清除文本框焦点
    LaunchedEffect(focused) {
        if (!focused) {
            focusManager.clearFocus()
        }
    }

    // 现有SearchTextField代码...
}

为什么之前的方法失效？ #

• 使用clickable修饰符会拦截点击事件，导致LazyColumn列表项的点击逻辑失效；
• 单独给LazyColumn添加pointerInput会被列表项的点击事件覆盖，无法触发全局空白区域的点击；
• FocusRequester需要主动调用freeFocus()，但缺少全局触发时机，而通过根布局的点击监听可以统一处理所有外部点击场景。

内容的提问来源于stack exchange，提问作者Alon Shlider