Question 235218 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – VStack padding is not being apploed when VStack is wrapped in a ScrollView

When I wrap a VStack inside a ScrollView, it seemingly removes the horizontal padding applied to the VStack causing the contents to go to the display edge as opposed to leaving space between the contents of the VStack and the edge of the display when horizontal padding is applied. I’m unsure why, or how to resolve this, but I’ve left reference images and my code below.

Intended Look:Image with Padding applied to VStack while VStack is not wrapped in ScrollView (ScrollView is commented out)

This is what I get when wrapping the VStack in a ScrollView:
Image of result what VStack is wrapped in ScrollView. Horizontal padding is removed from VStack and buttons and text fields are touching the edge of the display.

This is the code for what I have:

import SwiftUI

struct SignInView: View {
//    @Environment(.colorScheme) var colorScheme
    @State private var username: String = ""
    @State private var password: String = ""
    
    var body: some View {
        ScrollView {
            VStack {
                Rectangle()
                    .fill(.cyan)
                    .offset(y: -100)
                    .frame(width: UIScreen.main.bounds.width, height: 250)
                
                Text("Sign In to \*\*Name\*\*")
                    .bold()
                    .font(.system(size: 25))
                
                TextField("Username", text: $username)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.top)
                
                SecureField("Password", text: $password)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.bottom)
                    .frame(maxWidth: .infinity)
                
                Button(action: {
                    print("Sign In pressed, do something")
                }) {
                    Text("Sign In")
                        .bold()
                        .foregroundColor(.white)
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color.blue)
                        .cornerRadius(10)
                }
                
                HStack {
                    Button(action: {
                        print("Sign In w social option")
                    }) {
                        Text("Placeholder for Social")
                            .bold()
                            .foregroundColor(.white)
                            .padding()
                            .frame(maxWidth: .infinity)
                            .background(Color.blue)
                    }
                    Button(action: {
                        print("Sign In w social option 2")
                    }) {
                        Text("Placeholder for Social")
                            .bold()
                            .foregroundColor(.white)
                            .padding()
                            .frame(maxWidth: .infinity)
                            .background(Color.black)
                    }
                }
                
                Spacer()
            }
            .padding(.horizontal)
        }
    }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out, partially. If someone could provide more details on why or explain the reasoning, it'd be great, but it had to do with the .frame modifier for the Rectangle. It seems like using .frame(width: UIScreen.main.bounds.width) on the Rectangle within the VStack caused some issue. Moving the Rectangle outside of the VStack, but inside the ScrollView fixes it.


  2. 0

    Remove width from Rectangle(). Since the width is defined as the screen width, adding padding is making the total width bigger than the width of the screen.

    Try the following code

    struct SignInView: View {
  //    @Environment(.colorScheme) var colorScheme
  @State private var username: String = ""
  @State private var password: String = ""
  
  var body: some View {
    ScrollView {
      VStack {
        Rectangle()
          .fill(.cyan)
          .offset(y: -100)
          .frame(height: 250)
        VStack {
          Text("Sign In to \*\*Name\*\*")
            .bold()
            .font(.system(size: 25))
          
          TextField("Username", text: $username)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding(.top)
          
          SecureField("Password", text: $password)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding(.bottom)
            .frame(maxWidth: .infinity)
          
          Button(action: {
            print("Sign In pressed, do something")
          }) {
            Text("Sign In")
              .bold()
              .foregroundColor(.white)
              .padding()
              .frame(maxWidth: .infinity)
              .background(Color.blue)
              .cornerRadius(10)
          }
          
          HStack {
            Button(action: {
              print("Sign In w social option")
            }) {
              Text("Placeholder for Social")
                .bold()
                .foregroundColor(.white)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.blue)
            }
            Button(action: {
              print("Sign In w social option 2")
            }) {
              Text("Placeholder for Social")
                .bold()
                .foregroundColor(.white)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.black)
            }
          }
        }
        .padding(.horizontal)
        
        Spacer()
      }
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search