SwiftUI中UISearchController替代方案：搜索框与滚动内容共存问题

方案一：搜索结果挤开下方内容（同滚动容器） #

这种方式让搜索框、搜索结果和原有内容共享同一个滚动视图，当出现搜索建议时，结果列表会占据空间将下方内容向下推移，所有内容同步滚动。

核心是避免嵌套滚动（ScrollView 套 List 会引发滚动冲突），用 LazyVStack 替代 List，同时通过条件判断控制结果列表的显示：

@State private var searchText = ""
@State private var suggestions: [String] = []

var body: some View {
    ScrollView {
        VStack(spacing: 0) {
            // 搜索结果列表：仅当有建议时显示
            if !suggestions.isEmpty {
                LazyVStack(spacing: 0) {
                    ForEach(suggestions, id: \.self) { text in
                        NavigationLink(destination: ResultsPullerView(searchText: text)) {
                            Text(text)
                                .padding()
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .background(Color(.systemBackground))
                        }
                    }
                }
                .background(Color(.systemGray6))
            }
            
            // 原有内容区域
            VStack(spacing: 0.0) {
                Text("Some views here")
                    .padding(50)
                // 其他原有视图代码...
            }
        }
    }
    .searchable(text: $searchText)
    .edgesIgnoringSafeArea(.top)
    .onChange(of: searchText) { newValue in
        // 此处替换为实际的搜索建议生成逻辑
        suggestions = newValue.isEmpty ? [] : ["搜索建议1", "搜索建议2", "搜索建议3"]
    }
}

方案二：搜索结果覆盖在内容上方（模态悬浮式） #

这种方式让搜索结果以悬浮层形式覆盖在原有内容之上，不改变原有内容布局，类似系统自带的搜索弹窗效果。

通过 searchable 的激活状态结合 overlay 实现：

@State private var searchText = ""
@State private var suggestions: [String] = []
@State private var isSearchActive = false

var body: some View {
    ScrollView {
        VStack(spacing: 0.0) {
            Text("Some views here")
                .padding(50)
            // 其他原有视图代码...
        }
    }
    .searchable(text: $searchText, isPresented: $isSearchActive)
    .edgesIgnoringSafeArea(.top)
    .overlay(
        Group {
            // 搜索激活且有建议时显示悬浮列表
            if isSearchActive && !suggestions.isEmpty {
                VStack(spacing: 0) {
                    LazyVStack(spacing: 0) {
                        ForEach(suggestions, id: \.self) { text in
                            NavigationLink(destination: ResultsPullerView(searchText: text)) {
                                Text(text)
                                    .padding()
                                    .frame(maxWidth: .infinity, alignment: .leading)
                                    .background(Color(.systemBackground))
                            }
                            .border(Color(.systemGray4), edge: .bottom)
                        }
                    }
                    .background(Color(.systemBackground))
                    .cornerRadius(8)
                    .shadow(radius: 4)
                    .padding(.horizontal)
                }
                // 调整列表位置，使其对齐搜索框下方
                .alignmentGuide(.top) { _ in
                    -UIScreen.main.bounds.height * 0.1 // 可根据实际需求调整数值
                }
            }
        }, alignment: .top
    )
    .onChange(of: searchText) { newValue in
        // 此处替换为实际的搜索建议生成逻辑
        suggestions = newValue.isEmpty ? [] : ["搜索建议1", "搜索建议2", "搜索建议3"]
    }
}

// 扩展View，实现单边边框
extension View {
    func border(_ color: Color, edge: Edge, width: CGFloat = 1) -> some View {
        overlay(
            Rectangle()
                .fill(color)
                .frame(
                    height: edge == .top || edge == .bottom ? width : nil,
                    width: edge == .leading || edge == .trailing ? width : nil
                )
                .alignmentGuide(
                    edge == .top ? .bottom : edge == .bottom ? .top : edge == .leading ? .trailing : .leading
                ) { $0[edge] }
        )
    }
}

内容的提问来源于stack exchange，提问作者Anton Tropashko