When using PhotosPicker on visionOS the content has a background color. How do I remove this? I have noticed the same with Stepper.
Example:
Code:
import SwiftUI
import PhotosUI
struct AddImageView: View {
@State private var avatarItem: PhotosPickerItem?
@State private var avatarImage: Image = Image("ProfileImageEmpty")
@State private var ref: Image = Image("ProfileImageEmpty")
var body: some View {
VStack(alignment: .center, spacing: 8) {
PhotosPicker(selection: $avatarItem, matching: .images) {
ZStack(alignment: .center) {
avatarImage
.resizable()
.modifier(CoverImage())
if avatarImage == ref {
HStack(alignment: .center, spacing: 8) {
Image(systemName: "camera")
.font(.system(size: 18, weight:.semibold))
Text("Upload Image")
.modifier(Subtitle())
}
}
}
}
.background(.clear)
.onChange(of: avatarItem) {
Task {
if let loaded = try? await avatarItem?.loadTransferable(type: Image.self) {
avatarImage = loaded
} else {
print("Failed")
}
}
}
}
.frame(maxWidth: .infinity)
}
}
You can use .photosPicker
instead of PhotosPicker
. An .onTapGesture
can trigger it.
struct AddImageView: View {
@State private var avatarItem: PhotosPickerItem?
@State private var avatarImage: Image = Image("ProfileImageEmpty")
@State private var ref: Image = Image("ProfileImageEmpty")
@State private var isPresentingPicker: Bool = false
var body: some View {
VStack(alignment: .center, spacing: 8) {
ZStack(alignment: .center) {
avatarImage
.resizable()
.modifier(CoverImage())
if avatarImage == ref {
HStack(alignment: .center, spacing: 8) {
Image(systemName: "camera")
.font(.system(size: 18, weight:.semibold))
Text("Upload Image")
.modifier(Subtitle())
}
}
}.onTapGesture {
isPresentingPicker.toggle()
}
.background(.clear)
.task(id: avatarItem) { //`task` is safer than `onChange`
guard let avatarItem else {return}
if let loaded = try? await avatarItem.loadTransferable(type: Image.self) {
avatarImage = loaded
} else {
print("Failed")
}
}
.photosPicker(isPresented: $isPresentingPicker, selection: $avatarItem) //Modifier instead of `View`
}
.frame(maxWidth: .infinity)
}
}