SwiftUI中点击搜索按钮叠加显示白色搜索视图的实现方法

1. 添加搜索状态控制变量 #

先在结构体中新增两个状态变量：一个标记是否处于搜索模式，另一个绑定搜索输入框的内容：

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

2. 修改顶部栏的状态切换逻辑 #

根据isSearchActive的值，切换顶部栏的两种布局：

• 非搜索状态：保留你原来的返回按钮、头像、名称职位、搜索按钮
• 搜索状态：显示返回按钮、搜索输入框、关闭按钮，同时隐藏原有头像和文本，替换为白色背景的搜索栏

修改后的完整代码如下：

struct MessageListView: View {
    @Environment(\.dismiss) var dismiss
    @StateObject private var viewModel = AllMessagesListViewModel()
    @State var id: String = ""
    // 新增：控制搜索模式与搜索内容的状态变量
    @State private var isSearchActive = false
    @State private var searchText = ""
    
    var body: some View {
        ZStack {
            Color.hexF4F4FC
                .ignoresSafeArea()
            
            VStack(spacing: 0) {
                // 顶部栏容器，绿色背景保留
                VStack(spacing: 0) {
                    if !isSearchActive {
                        // 非搜索状态下的原有布局
                        HStack {
                            Button {
                                dismiss()
                            } label: {
                                Image(systemName: "arrow.left")
                                    .font(.system(size: 25))
                                    .tint(.white)
                                    .padding(.trailing, 6)
                            }
                            
                            URLImageView(url: viewModel.senderDtl?.photo ?? "", placeholder: "NoProfilePic", width: 37, height: 37)
                                .clipShape(Circle())
                            
                            VStack(alignment: .leading) {
                                Text(viewModel.senderDtl?.name ?? "N/A")
                                    .font(.calibriRegular(with: 16))
                                    .foregroundStyle(.white)
                                
                                Text(viewModel.senderDtl?.designation ?? "N/A")
                                    .font(.calibriRegular(with: 14))
                                    .foregroundStyle(.white)
                            }
                            
                            Spacer()
                            
                            // 点击激活搜索模式
                            Button(action: {
                                isSearchActive = true
                            }, label: {
                                Image("icn_search")
                            })
                        }
                        .padding(16)
                    } else {
                        // 搜索状态下的白色搜索栏布局
                        HStack {
                            // 保留返回按钮，调整颜色适配白色背景
                            Button {
                                dismiss()
                            } label: {
                                Image(systemName: "arrow.left")
                                    .font(.system(size: 25))
                                    .tint(.black)
                                    .padding(.trailing, 6)
                            }
                            
                            // 搜索输入框
                            TextField("搜索...", text: $searchText)
                                .padding(.vertical, 8)
                                .padding(.horizontal, 12)
                                .background(Color.gray.opacity(0.1))
                                .cornerRadius(8)
                            
                            // 关闭搜索按钮，同时清空输入内容
                            Button(action: {
                                isSearchActive = false
                                searchText = ""
                            }, label: {
                                Image(systemName: "xmark.circle.fill")
                                    .font(.system(size: 22))
                                    .tint(.gray)
                            })
                        }
                        .padding(16)
                        .background(Color.white)
                    }
                }
                .background(Color.appGreen2.ignoresSafeArea())
                
                Spacer()
            }
        }
    }
}

3. 关键逻辑说明 #

• 通过isSearchActive布尔值实现两种布局的无缝切换
• 搜索状态下调整返回按钮的颜色，适配白色背景的视觉效果
• 关闭搜索时自动清空输入内容，优化交互体验
• 搜索输入框添加了基础样式，你可以根据设计需求自定义圆角、背景色等细节

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