Search code examples
iosxcodebackgroundswiftuiios-simulator

Home page view background color in not on full screen in iPhone 11 Simulator


I am trying to build an app in SwiftUI and facing 1 challenge (Xcode Version 11.5) -

  1. While running app on iPhone 11 simulator, background color is not coming on entire screen, bottom part of screen is still white however while running it on iPhone 8 simulator, it works fine. Not sure if it is simulator issue or code issue. I tried to add Spacer, change VStack, HStack but it did not work.

    struct HomePageView: View {
        @State var size = UIScreen.main.bounds.width / 1.6
    
        var body: some View {
            GeometryReader{geometry in
                VStack {
                    HStack {
                        ZStack{
                            NavigationView{
                                ZStack {
                                    ScrollView(.vertical, showsIndicators: false) {
                                        VStack {
                                            View1()
                                        }.frame( maxWidth: .infinity)
                                    }
    
                                    .navigationBarItems(leading: Button(action: {
                                        self.size = 10
    
                                    }, label: {
                                        Image("menu")
                                            .resizable()
                                            .frame(width: 30, height: 30)
                                    }).foregroundColor(.appHeadingColor), trailing:
                                        Button(action: {
                                            print("profile is pressed")
                                        }) {
                                            HStack {
                                                NavigationLink(destination: ProfileView()) {
                                                    LinearGradient.lairHorizontalDark
                                                        .frame(width: 30, height: 30)
                                                        .mask(
                                                            Image(systemName: "person.crop.circle")
                                                                .resizable()
                                                                .scaledToFit()
                                                    )
                                                }
                                            }
                                        }
                                    ).navigationBarTitle("Home", displayMode: .inline)
                                }
                            }
                            HStack{
                                menu(size: self.$size)
                                    .cornerRadius(20)
                                    .padding(.leading, -self.size)
                                    .offset(x: -self.size)
                                Spacer().background(Color.lairBackgroundGray)
                            }
                            //Spacer()
                        }.animation(.spring()).background(Color.lairBackgroundGray)
                        //Spacer()
                    }.padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top)
    
                        .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom)
                }.frame(height: geometry.size.height).background(Color.lairBackgroundGray)
            }//.background(Color.lairBackgroundGray.edgesIgnoringSafeArea(.all))
        }
    }
    

    Below is my another view which basically get painted on screen as part of home view. Please forgive me to put so much code here but wanted to make sure if it is not because of View1 -

    struct View1: View { @State var index = 0 var body: some View{ // ScrollView { GeometryReader { geometry in VStack{ HStack{ VStack { ZStack{ Circle() .trim(from: 0, to: 1) .stroke(Color.lairDarkGray.opacity(0.09), style: StrokeStyle(lineWidth: 34, lineCap: .round)) .frame(width: 80, height: 80)

                                    Circle()
                                        .trim(from: 0, to: 0.5)
                                        .stroke(LinearGradient(gradient: Gradient(colors: [.buttonGradientStartColor, .buttonGradientEndColor]), startPoint: UnitPoint(x: -0.2, y: 0.5), endPoint: .bottomTrailing), style: StrokeStyle(lineWidth: 34, lineCap: .round))
                                        .frame(width: 80 , height: 80)
                                        .rotationEffect(.init(degrees: -90))
    
                                        Text("15")
                                            .font(.system(size:30))
                                            .fontWeight(.bold)
                                }.padding()
                                Text("Day(s)")
                                .foregroundColor(Color.black.opacity(0.8))
                            }.frame(height: 100)
    
    
                            VStack(alignment: .leading, spacing: 12){
                                HStack {
                                     Image("1")
                                        .resizable()
                                         .aspectRatio(contentMode: .fit)
                                         .frame(width: 170, height: 170)
                                 }
                               .background(Color.lairBackgroundGray)
                                //.padding(.bottom, 5)
                            }
                            .padding(.leading, 20)
                            Spacer(minLength: 0)
                        }
                        .padding(.horizontal, 20)
    
                    }//.frame(height: geometry.size.height)
                    .background(Color.lairBackgroundGray.edgesIgnoringSafeArea(.all))
                }
                //}
    
            }
    
    }[![enter image description here][1]][1]
    

Solution

  • After recreating entire view and removing some unnecessary view, i was able to resolve this iissue.