How to change the background behind a presented view

Question

Created Sep ’23

Replies 3

Boosts 0

Views 3.5k

Participants 4

I am presenting a sheet in my project but I would like to change the opacity/color of the background behind the view presented.

Here's my code :

@State var presentElement: Bool = false

var body: some View {
  Text("Present el")
    .onTapGesture {
      presentElement = true
    }
    .sheet(isPresented: $presentElement) {
            NotifActionModal()
            .background() {
                GeometryReader { geometry in
                    Path { path in
                        frameSize = geometry.size.height 
                    }
                }
            }
            .presentationDetents([.height(frameSize)])
        }
}

Boost

Answer 1

Claude31 OP

Sep ’23

Welcome to the forum. I hope I understand correctly your question.

Have you tried to use a Bool State var:

.background(test ? .blue : .red)

0

Answer 2

Vision Pro Engineer OP

Apple

Sep ’23

Hi,

If you are trying to set the background of the entire sheet, you can do something like this:

.sheet(isPresented: $isPresented) {
                DetailView()
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(.red)
            }

By first setting the frame to be the entire sheet size and then setting the background color to be red, the entire sheet will be red. To set the opacity, you can use the opacity modifier like this:

 .background(.red.opacity(0.5))

0

Answer 3

BabyJ OP

Sep ’23

You can use the presentationBackground(_:) modifier.

Here is an example of how you can use it:

.sheet(...) {
    SheetView()
        .presentationBackground(.red.opacity(0.5)) // pass in a colour or even a custom view
}

Note: the translucency of the sheet background means content behind the sheet presentation will show through. If you don't want this behaviour use the regular background(_:ignoresSafeAreaEdges:) modifier with a maximum frame.

0