Swift UI VStack align up. Make textfield appear with keyboard when pressing in it

Question

I am having issues placing my "twitter" image higher in my view while using SwiftUI. I want to get the twitter image higher up for all closer to my two blob images, as well as add the spacing between the twitter image and the "Sign into my account" phrase. In addition I am trying to get my UITextfield, I guess now its just TextField to appear with the keyboard when clicked in below my "Sign into your account phrase" but this is now showing up in my view.

Please see image of what is happening attached.

    GeometryReader { (deviceSize: GeometryProxy) in

        ZStack {
            //Define a screen color
            LinearGradient (gradient: Gradient(colors:[Color(ColorsSaved.gitLabDark),Color(ColorsSaved.gitLabLight)]),startPoint: .leading,endPoint: .trailing)

                //Extend the screen to all edges
                .edgesIgnoringSafeArea(.all)
            Image("blobVectorLight")
                .resizable()
                .frame(width: deviceSize.size.height * (220/812) * 0.81, height: deviceSize.size.height * (220/812), alignment: .topTrailing)
                .frame(width: deviceSize.size.width, height:deviceSize.size.height , alignment: .topTrailing)
                .edgesIgnoringSafeArea(.all)

            Image("blobVectorDark")
                .resizable()
                .frame(width: deviceSize.size.height * (208/812) * 0.74, height: deviceSize.size.height * (208/812), alignment: .topTrailing)
                // .overlay(Image("blobVectorLight"))
                .frame(width: deviceSize.size.width, height:deviceSize.size.height , alignment: .topTrailing)
                .edgesIgnoringSafeArea(.all)

            VStack{

                Image ("twitter")
                    .resizable()
                    .frame(width: deviceSize.size.height*(77/812)*2.078, height: deviceSize.size.height*(77/812))

                Text ("Sign into your account")
                    .foregroundColor(.white)

                TextField ("Username")

            }
        }
    }
}

}

score 1 · Answer 1 · answered Nov 26 '19 at 07:58

To move any element up use:

.offset(y: -200.0)

To increase spacing between elements in a VStack declare it like this:

VStack(spacing: 20.0) { //....

Too use a TextField you need a value to bind it to:

//outside the body declare:
@State private var username: String = ""

//and then inside the body:
TextField("Username", text: $username)

score 1 · Answer 2 · answered Nov 26 '19 at 18:19

I just sum up all what you are supposed to do here:

           VStack(spacing: 50){

            Spacer()
            Image ("image")
                .resizable()
                .frame(width: deviceSize.size.height*(77/812)*2.078, height: deviceSize.size.height*(77/812))
            Spacer()
            Text ("Sign into your account")
                .foregroundColor(.white)

            TextField.init("Username", text: self.$userName)
            Spacer()
        }

above the body:

   @State var userName: String = ""
   var body: some View {
  ......

Hope you get what you want.

Swift UI VStack align up. Make textfield appear with keyboard when pressing in it

2 Answers2