swiftui

Why does my sheet still have a gray background (despite .presentationBackground)?


I'm working on a screen where a user can open a sheet tapping on an icon, containing 3 buttons. That's it.

I can set the sheet background in any way.

Despite setting .presentationBackground (which is light blue), there a some sort of system background (which is gray).

Some deatails of my project: Xcode: 15.4 Swift: 5

SCREENSHOT SCREEN

//
//  ProfileScreen.swift
//  
//
//   
//

import SwiftUI
import ActivityIndicatorView
import LucideIcons
import SwiftUIImageViewer

struct ProfileScreen: View {
    @State var user_pid = ""
    @State var User: UserModel?
    @State private var isImagePresented = false
    @State var showSheetUserMenu = false
    @State private var sheetHeight: CGFloat = .zero
    var body: some View {
        
        GeometryReader { metrics in
            ZStack{
                Color(Color("bgScreenColor"))
                    .ignoresSafeArea(.all)
                
                
                AsyncImage(url: URL(string: User?.cover_url ?? "no")) { image in
                    image
                        .resizable()
                        .scaledToFill()
                        .frame(minWidth: 0)
                        .edgesIgnoringSafeArea(.all)
                } placeholder: {
                    Loader()
                    
                }.ignoresSafeArea(.all)
               
                
                
                VStack(alignment: .trailing,spacing: 0){
             
                    
                    VStack{
                    
                                        HStack(spacing: 0) {
                                            usernameCnt(text: User?.nickname ?? "no")
                                            Spacer().frame(width: 10)
                                            userAvatar(avatarurl: User?.avatar_url ?? "no")
                                            Spacer()
                                            Image(uiImage: Lucide.ellipsis).resizable().renderingMode(.template).foregroundColor(Color("icon_color")).frame(width: 20, height: 20)  .sheet(isPresented: $showSheetUserMenu) {
                                                SheetUserMenu()
                                                
                                                .fixedSize(horizontal: false, vertical: true)
                                                .modifier(GetHeightModifier(height: $sheetHeight))
                                                .presentationDetents([.height(sheetHeight)]).presentationBackground(Color.sheetBg)
                                            
                                                
                                            }.onTapGesture{
                                                showSheetUserMenu = true
                                            }
                                            Spacer().frame(width: 10)
                                        }
                                       //hstack
                                        
                    
                    
                    
                   
                   HStack{
                       Image("span1")
                           .resizable()
                           .scaledToFit()
                           .frame(width:30,height: 30)
                       
                       
                       Text(User?.user_what_doing ?? "n dsfsf dssdf dsfa dfsds fregwwg er gewrg gweg erwg ddfs dfgf gsdg fo").modifier(TYPO_textNormal()).padding(5).background(Color("inputText").clipShape(
                           .rect(
                               topLeadingRadius: 5,
                               bottomLeadingRadius: 5,
                               bottomTrailingRadius: 5,
                               topTrailingRadius: 5
                           )
                       )
                       )
                   }.frame(maxWidth: .infinity,alignment: .topLeading)
               //stack
               
                    
                
                        
                        
                    }.frame( width: metrics.size.width, height:metrics.size.height*0.5, alignment:.topTrailing ).background(.red)
                    //vstack
                 
                    
        
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    VStack(alignment:.leading){
                        
                      
                                    
                                    
                                    sideBtn(text: "profile_see_bio")
                                    sideBtn(text: "profile_see_posts")

                     
                        
                     spacerBottomUI()
                        
                     }.frame( width: metrics.size.width, height:metrics.size.height*0.5, alignment:.bottomLeading ).background(.yellow)
                //vstack
             
                    
                    
                    
                    
                }.frame(maxWidth: .infinity, maxHeight: .infinity,alignment: .topLeading)
                //vstack
             
            }.onAppear{
                getUser(user_pid: user_pid)
            }
            //zstack
        }
        
    }
    
    
    struct SheetUserMenu: View {
      var body: some View {
          VStack{
              
           
              HStack{
                  Text("report_user").modifier(TYPO_textNormal()).padding(10)
                  Spacer()
                  Image(uiImage: Lucide.shieldUser).resizable().renderingMode(.template).foregroundColor(Color(.white)).frame(width: 20, height: 20)
              }.padding( .horizontal,10)
              Divider().frame(height: 1).background(Color("border_line"))
         
              HStack{
                  Text("block_user").modifier(TYPO_textNormal()).padding(10)
                  Spacer()
                  Image(uiImage: Lucide.userMinus).resizable().renderingMode(.template).foregroundColor(Color(.white)).frame(width: 20, height: 20)
              }.padding( .horizontal,10)
              Divider().frame(height: 1).background(Color("border_line"))
             
              HStack{
                  Text("block_user").modifier(TYPO_textNormal()).padding(10)
                  Spacer()
                  Image(uiImage: Lucide.userMinus).resizable().renderingMode(.template).foregroundColor(Color(.white)).frame(width: 20, height: 20)
              }.padding( .horizontal,10)
              Divider().frame(height: 1).background(Color("border_line"))
             
            
              
              
          }
          
    
      }
    }
    
    
    func getUser(user_pid: String) {
     
        guard let url = URL(string: apiURL) else { return }
        let body = "act=profile_info&pid=\(user_pid)&ssid=\(global_ssid)&lang=\(global_lang)"
        let finalBody = body.data(using: .utf8)
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.httpBody = finalBody
     //   print(body)
        URLSession.shared.dataTask(with: request) { data, response, error in
            guard let data = data else { return }
      print(data, String(data: data, encoding: .utf8) ?? "*unknown encoding*")
            do {
                let user = try JSONDecoder().decode(UserModel.self, from: data)
              
                 //  print("username,"  ,user.first?.nickname)
                 User = user
                    
                
            } catch {
                
                  print(error )
                
                
                
                
                
            }
            
        }.resume()
    }
    
}

#Preview {
    ProfileScreen( )
}

Solution

  • You can apply following hack:

    struct SheetUserMenu: View {
         var body: some View {
              VStack {
                  HStack{
                      Text("report_user").modifier(TYPO_textNormal()).padding(10)
                      Spacer()
                      Image(uiImage: Lucide.shieldUser).resizable().renderingMode(.template).foregroundColor(Color(.white)).frame(width: 20, height: 20)
                  }.padding( .horizontal,10)
    
                  Divider().frame(height: 1)
                     .background(Color("border_line"))
             
                  HStack{
                      Text("block_user").modifier(TYPO_textNormal()).padding(10)
                      Spacer()
                      Image(uiImage: Lucide.userMinus).resizable().renderingMode(.template).foregroundColor(Color(.white)).frame(width: 20, height: 20)
                  }.padding( .horizontal,10)
    
                  Divider().frame(height: 1).background(Color("border_line"))
                 
                  HStack {
                      Text("block_user").modifier(TYPO_textNormal()).padding(10)
                      Spacer()
                      Image(uiImage: Lucide.userMinus).resizable().renderingMode(.template).foregroundColor(Color(.white)).frame(width: 20, height: 20)
                  }.padding( .horizontal,10)
                  ///////////////
                  //hack is HERE
                  ///////////////
                  .padding(.bottom, 50)
                  .background(Color(hex: 0x88fbfd))//pseudocode here, there is no standard such init
                  .padding(.bottom, -50)
    
                  Divider().frame(height: 1)
              }
          }