SwiftUI切换Tab后搜索视图未消失问题求助

要实现切换回"Rooms"标签时自动隐藏搜索视图，你可以通过以下步骤修改代码：

1. 跟踪标签页选中状态：在HomeView中添加标签枚举和状态变量，绑定到TabView的selection属性，用来监控当前激活的标签页。
2. 传递激活状态到搜索视图：给ItemsSearchView添加一个布尔参数，传递当前标签是否激活的状态。
3. 自动关闭搜索视图：利用SwiftUI的dismissSearch环境方法，在标签切换时清空搜索词并关闭搜索视图。

修改后的完整代码如下：

import SwiftUI

struct HomeView: View {
    // 定义标签枚举，方便跟踪选中状态
    enum Tab: Hashable {
        case rooms, items
    }
    @State private var selectedTab: Tab = .rooms
    
    var body: some View {
        NavigationStack {
            TabView(selection: $selectedTab) {
                Text("Rooms")
                    .tabItem {
                        Label("Rooms", systemImage: "pencil")
                    }
                    .tag(Tab.rooms)
                
                // 传递当前标签是否激活的状态
                ItemsSearchView(isActive: selectedTab == .items)
                    .tabItem {
                        Label("Items", systemImage: "magnifyingglass")
                    }
                    .tag(Tab.items)
            }
        }
    }
}

struct ItemsSearchView: View {
    @State var searchTerm = ""
    @State var listData = [Item](arrayLiteral: Item(id: "abc", name: "first"), Item(id: "def", name: "second"))
    // 接收外部传入的标签激活状态
    var isActive: Bool
    // 调用系统提供的关闭搜索视图的环境方法
    @Environment(\.dismissSearch) private var dismissSearch
    
    var body: some View {
        VStack {
            List(listData) { curItem in
                Text(curItem.name)
            }
            .searchable(text: $searchTerm)
        }
        // 监听激活状态变化，切换到非Items标签时重置搜索状态
        .onChange(of: isActive) { _, newValue in
            if !newValue {
                searchTerm = ""
                dismissSearch()
            }
        }
    }
}

public struct Item: Identifiable {
    public var id : String
    public var name: String
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

原理说明 #

• 通过TabView的selection绑定，我们能精准知道用户当前切换到了哪个标签页。
• 当用户切回"Rooms"时，isActive变为false，触发onChange回调：清空搜索词保证状态干净，调用dismissSearch()直接关闭搜索视图，完美解决残留问题。

内容的提问来源于stack exchange，提问作者Cameron Henige