[英]SwiftUI: How do I display a view as a pop up on top of the current view blurred in the background?
On a button click I want to be able to display a view (a rounded rectangle with profile info) on top of the current view (a list of all profiles) blurred in the background.单击按钮时,我希望能够在背景模糊的当前视图(所有配置文件的列表)之上显示视图(带有配置文件信息的圆角矩形)。
Below is what I am trying to get to以下是我想要达到的
This is what I currently have这是我目前拥有的
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")
}
}
}
Any help is much appreciated, thanks in advance非常感谢任何帮助,提前致谢
You must do something like this你必须做这样的事情
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"])
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.