如何在 SwiftUI 中在另一个视图上显示一个视图

Question

我创建了一个带有后退按钮和图像视图以及两个文本和搜索按钮的绿色视图。现在，如果我单击 searchBtn，我需要显示一个带有文本字段和关闭按钮的白色视图。在绿色视图本身上，通过隐藏图像视图和文本和搜索，只想仅显示后退按钮

代码：有了这个，我可以创建绿色视图，但是如果我单击搜索按钮，我需要在同一绿色视图上显示带有文本字段和关闭按钮的白色视图，但不隐藏后退箭头。怎么做？请指导我

struct MessageListView: View {
@Environment(\.dismiss) var dismiss
@StateObject private var viewModel = AllMessagesListViewModel()
@State var id: String = ""
var body: some View {
    ZStack {
        Color.hexF4F4FC
            .ignoresSafeArea()
        VStack(spacing: 0) {
            
            VStack {
                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: {}, label: {
                        Image("icn_search")
                    })
                }
                .padding(16)
            }
            .background(
                Color.appGreen2
                    .ignoresSafeArea()
            )
            Spacer()
        }
        Spacer()
    }
}
}

o/p：左侧我想要像右侧一样只是带有文本字段和关闭按钮的白色视图，不需要黑色边框。如何做到这一点，请指导我

。

Answer 1

一种方法是在要覆盖的视图部分周围放置一个容器，例如嵌套的

HStack

。然后将搜索视图显示为覆盖在该容器上。布尔状态变量可用于控制何时显示叠加层。

除了覆盖层之外，您还可以选择使用

ZStack

。然而，覆盖的优点是可以使用详细视图来形成覆盖区，然后将搜索视图（在覆盖中）限制为相同的帧大小。这样，当显示搜索字段时，标题的高度不会改变。如果使用

ZStack

，您可能需要修复搜索视图或

ZStack

本身的高度。

此处说明了更改：

@State private var showingSearchField = false

private var senderDetailView: some View {
    HStack {
        URLImageView(url: viewModel.senderDtl?.photo ?? "", placeholder: "NoProfilePic", width: 37, height: 37)
            .clipShape(Circle())
        VStack(alignment: .leading) {
            // ...
        }
        Spacer()

        Button {
            showingSearchField = true
        } label: {
            Image("icn_search")
        }
    }
}

private var searchFieldView: some View {
    // dummy implementation
    Rectangle()
        .fill(.white)
        .border(.black, width: 3)
        .onTapGesture {
            showingSearchField = false
        }
}

在

body

内部，

HStack

则变为：

HStack {
    Button  {
        dismiss()
    } label: {
        Image(systemName: "arrow.left")
            .font(.system(size: 25))
            .tint(.white)
            .padding(.trailing, 6)
    }
    senderDetailView
        .overlay {
            if showingSearchField {
                searchFieldView
            }
        }
}
.padding(16)