SOLVED: Trying to change the background color of a view presented using presentationDetents

@flaneur7508

Jun '23

I display this view displayed in a sheet using

                .presentationDetents([.height(700)])

I want to change the background color but I cant fill the top and the bottom edges of the view.

Here is a link to the screen shot https://imgur.com/a/TX2rNZh

Here's the code


import SwiftUI

struct eh: View {
    @State private var showingExplainerHighlights = false

    var body: some View {
        Section {
            Button {
                showingExplainerHighlights.toggle()
            } label: {
                Label {
                    Text("XXX")
                        .font(.system(size: 16, weight: .regular, design: .rounded))
                        .multilineTextAlignment(.center)
                        .foregroundColor(.white)
                } icon: {
                    Image(systemName: "questionmark.bubble")
                        .foregroundColor(.appOrange)
                        .font(.system(size: 16, weight: .semibold, design: .rounded))
                }
            }

            .sheet(isPresented: $showingExplainerHighlights) {
                VStack {
                    Image(systemName: "questionmark.bubble")
                        .foregroundColor(Color.appOrange)
                        .font(.system(size: 40, weight: .regular, design: .rounded))
                        .padding(1)
                    Text("xxx\n")
                        .font(.system(size: 30, weight: .medium, design: .rounded))
                        .foregroundColor(Color.appOrange)
                    Text("xxx.")
                        .foregroundColor(.secondary)
                        .multilineTextAlignment(.center)
                    Text("xxx")
                        .font(.system(size: 18, weight: .light, design: .rounded))
                        .padding(20)
                }
                // COLOR HERE
                .background(Color.blue.edgesIgnoringSafeArea(.all))
                .presentationDetents([.height(700)])
            }
        }
        .listRowBackground(Color.appBrandLighter)
    }
}

@NigelGee HWS+

Jun '23

Try this

.sheet(isPresented: $showingExplainerHighlights) {
    ZStack {
        //Background Color
        Color.secondary
            .ignoresSafeArea()

        VStack {
            Image(systemName: "questionmark.bubble")
                .foregroundColor(.orange)
                .font(.system(size: 40, weight: .regular, design: .rounded))
                .padding(1)
            Text("xxx\n")
                .font(.system(size: 30, weight: .medium, design: .rounded))
                .foregroundColor(.orange)
            Text("xxx.")
                .foregroundColor(.secondary)
                .multilineTextAlignment(.center)
            Text("xxx")
                .font(.system(size: 18, weight: .light, design: .rounded))
                .padding(20)
        }
    }
    .presentationDetents([.height(700)])
}

Change the colors as I did not have your custom colors

PS you would be better to have the View that inside the sheet as a separate View (you may have this and just using this as an example)

@flaneur7508

Jun '23

@NigelGee Thank you! ZStack, why didn't I think of that! Obvious really :)

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.