如何检测带searchable修饰符的搜索栏取消按钮点击事件

DevOps 小满

2026-10-1

解决方案

iOS 15+ 下配合 searchable 监听取消按钮点击有两种可行实现方案：

方案一：监听搜索绑定值的自动重置时机

searchable 修饰符绑定的搜索词变量，在用户点击取消按钮时会被系统自动置为空字符串，你可以通过监听这个变量的变化判断是否触发重置逻辑：

首先定义搜索词绑定变量，同时加一个额外变量标记是否是用户主动输入触发的空值

@State private var searchText = ""
@State private var isSearchActive = false

配合 onChange(of: searchText) 监听变化，只有当搜索处于激活状态、且搜索词被置空时，判断为用户点击了取消按钮：

.onChange(of: searchText) { newValue in
    if newValue.isEmpty && isSearchActive {
        // 执行重置列表逻辑，回到初始状态
        resetToOriginalList()
        isSearchActive = false
    }
}

同时搭配 onSubmit(of: .search) 处理你的原有搜索请求逻辑，并且在提交时把 isSearchActive 置为true

.onSubmit(of: .search) {
    isSearchActive = true
    // 原有HTTP请求逻辑
    fetchSearchResult(keyword: searchText)
}

方案二：使用 `isSearching` 环境变量监听

你可以通过环境变量获取当前搜索的激活状态，当状态从激活变为非激活时，同时搜索词为空，即可判定为用户点击了取消按钮：

首先声明环境变量

@Environment(\.isSearching) private var isSearching

监听 isSearching 的变化：

.onChange(of: isSearching) { newValue in
    // 搜索从激活状态变为非激活，且搜索词为空时，触发重置
    if !newValue && searchText.isEmpty {
        resetToOriginalList()
    }
}

这个方案兼容性更好，不需要额外维护手动的状态标记，更适配系统原生的搜索交互逻辑。