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