I have face trouble to get blur background from the Nav bar Blur Effect into Collection View's View background to visible table view. I am give you a collection view here in the SwiftUI.
VStack {
if pinnedContacts.isEmpty {
Text("No Pinned Contacts")
.font(.headline)
.foregroundColor(.secondary)
.padding(.top, 20)
} else {
ZStack {
Color.clear // it won't hide background
.frame(height: 150)
.blur(radius: 10) // it worked, but need background color hide
.edgesIgnoringSafeArea(.all)
.background(Color.clear)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 20) {
ForEach(pinnedContacts, id: \.self) { contact in
VStack {
if let imageData = contact.thumbnailImageData,
let uiImage = UIImage(data: imageData) {
Image(uiImage: uiImage)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 80, height: 80)
.clipShape(Circle())
} else {
Image("Profile")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 80, height: 80)
.clipShape(Circle())
}
Text("\(contact.givenName) \(contact.familyName)")
.font(.headline)
.multilineTextAlignment(.center)
.padding(.top, 8)
Text(contact.organizationName)
.font(.subheadline)
.foregroundColor(.secondary)
.multilineTextAlignment(.center)
.foregroundColor(.gray)
}
.frame(width: 100)
.onTapGesture {
showContactDetailView(contact)
}
}
}
.padding(.horizontal)
}
}
}
I have been stressful researched to see why view cant get rid color background if .clear set. If you change Color.red it will show color fully of view... but why the View cant rid color background if I add blur effect. let me know if you find issues.
Screenshot:
