ios - SwiftUI:如何在背景模糊的当前 View 之上将 View 显示为弹出窗口？

Question

在单击按钮时，我希望能够在背景模糊的当前 View (所有配置文件的列表)之上显示一个 View (带有配置文件信息的圆角矩形)。

下面是我想达到的目的

这是我目前拥有的

import SwiftUI

struct profileList: View {
    var list: [String]

    @State var displayItem: Int = -1

    var body: some View {
        VStack (spacing: 20){
            Text("Profile List").fontWeight(.bold)
                .padding(.bottom, 80)

            ForEach(0 ..< list.count) {number in
                Button(action: {self.displayItem = number}) { Text(self.list[number]) }
            }


            if (displayItem != -1) {
                profileInfo(text: list[self.displayItem])
                    .padding(.top, -350)
            }
            Spacer()
        }
    }
}

struct profileInfo: View {
    var text: String
    var body: some View {
        VStack {
            Spacer()
            HStack {
                VStack(spacing: 20) {
                    Text(text).fontWeight(.bold).padding(.all, 20)

                    Text("Name")
                    Text("Age")
                    Text("Profession")
                    Text("Interest")
                }
            }
            .frame(minWidth: 300, idealWidth: 300, maxWidth: 300, minHeight: 250, idealHeight: 100, maxHeight: 250, alignment: .top).fixedSize(horizontal: true, vertical: true)
            .background(RoundedRectangle(cornerRadius: 27).fill(Color.white.opacity(1)))
            .overlay(RoundedRectangle(cornerRadius: 27).stroke(Color.black, lineWidth: 1))
            Spacer()
        }
    }
}

struct contentView4_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            profileList(list: ["ABC", "DEF", "GHI", "JKL", "MNO", "PQR"])
            profileInfo(text: "XYZ")
        }
    }
}

非常感谢任何帮助，提前致谢

Answer 1

你必须这样做

import SwiftUI

struct ProfileList: View {
  var list: [String]

  @State var displayItem: Int = -1

  var body: some View {
    ZStack{
        VStack (spacing: 20){
            Text("Profile List").fontWeight(.bold)
                .padding(.bottom, 80)
            
            ForEach(0 ..< list.count) {number in
                Button(action: {self.displayItem = number}) { Text(self.list[number]) }
            }
        }
        
        
        if (displayItem != -1) {
            ProfileInfo(text: list[self.displayItem], displayItem: $displayItem)
                .padding(.top, -350)
        }
        Spacer()
    }.animation(.easeInOut)
  }
}

struct ProfileInfo: View {
  var text: String
  @Binding var displayItem:Int

  var body: some View {
    ZStack{
        Rectangle()
        .fill(Color.gray)
        .opacity(0.5)
        
        VStack {
            Spacer()
            HStack {
                VStack(spacing: 20) {
                    Text(text).fontWeight(.bold).padding(.all, 20)
                    
                    Text("Name")
                    Text("Age")
                    Text("Profession")
                    Text("Interest")
                }
            }
            .frame(minWidth: 300, idealWidth: 300, maxWidth: 300, minHeight: 250, idealHeight: 100, maxHeight: 250, alignment: .top).fixedSize(horizontal: true, vertical: true)
            .background(RoundedRectangle(cornerRadius: 27).fill(Color.white.opacity(1)))
            .overlay(RoundedRectangle(cornerRadius: 27).stroke(Color.black, lineWidth: 1))
            Spacer()
        }
    }.onTapGesture {
        self.displayItem = -1
    }
  }
}

struct ProfileList_Previews: PreviewProvider {
static var previews: some View {
    ProfileList(list: ["ABC", "DEF", "GHI", "JKL", "MNO", "PQR"])
  }
}