How to remove PhotosPicker background colour on visionOS?

110 Views Asked by At

When using PhotosPicker on visionOS the content has a background color. How do I remove this? I have noticed the same with Stepper.

Example:

enter image description here

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)
    }
}
1

There are 1 best solutions below

0
On BEST ANSWER

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)
    }
}