Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Swift ui stacks causing gap at the top of the screen when frame should be first

In Swift ui I have a tabview and am going to my profile test page but in the simulator it displaying in the middle of the page.

var body: some View {

        VStack() {
            Text("Welcome")
                .font(.largeTitle)
                .foregroundColor(.black)
             ZStack {
               RoundedRectangle(cornerRadius: 25, style: .continuous)
               .fill(.red)
                   VStack {
                           Image("murry")
                                          .clipShape(Circle())
                                          .shadow(radius: 10)
                                          .overlay(Circle()
                                         .stroke(Color.red, lineWidth: 5))
                                   Text("Murry GoldBerg")
                           
                           HStack{
                               Text("Following:0").foregroundColor(.white)
                               Text("Followers:2").foregroundColor(.white)
                               Text("Kids:0").foregroundColor(.white)
                           }
                         

                       }
                       .padding(20)
                       .multilineTextAlignment(.center)
                   }
                   .frame(width: 450, height: 250)

               }
    Spacer()

        }
        
}

My Code as to how am inserting my views in the tab view not showing it all as no need just a snippet

struct ContentView: View {
  var body: some View {
    TabView{
        HomeView()                .tabItem {
                Image(systemName: "house")
                Text("Home")
                
            }
            
        ProfileView()
            .tabItem {
                Image(systemName: "person.circle.fill")
                Text("Profile")
                
            }
        
        StatsView()
            .tabItem {
                Image(systemName: "plus").renderingMode(.original).padding()
                Text("Plus")
                
            }
   }

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Even on a real device it is doing the same so I no its not just the simlutor.

>Solution :

The reason is there is only one VStack so it will be default the main layout of the view. Default VStack if has only one view is from center view.

You just need add another VStack to cover your VStack then it will layout from top

var body: some View {
    VStack {
        VStack() {
            Text("Welcome")
                .font(.largeTitle)
                .foregroundColor(.black)
             ZStack {
                 RoundedRectangle(cornerRadius: 25, style: .continuous)
                     .fill(.red)
                 VStack {
                     Image("murry")
                        .clipShape(Circle())
                        .shadow(radius: 10)
                        .overlay(Circle()
                        .stroke(Color.red, lineWidth: 5))
                     Text("Murry GoldBerg")
                     HStack{
                         Text("Following:0").foregroundColor(.white)
                         Text("Followers:2").foregroundColor(.white)
                         Text("Kids:0").foregroundColor(.white)
                     }
                  }
                 .padding(20)
                 .multilineTextAlignment(.center)
            }
            .frame(width: 450, height: 250)
            Spacer()
        }
    }
}

The result

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading