Swift UI VStack 对齐。按下时使文本字段与键盘一起出现

Posted 2023-02-24

【中文标题】Swift UI VStack 对齐。按下时使文本字段与键盘一起出现

【英文标题】：Swift UI VStack align up. Make textfield appear with keyboard when pressing in it

【发布时间】：2019-11-26 05:55:11

【问题描述】：

我在使用 SwiftUI 时将我的“twitter”图像放在我的视图中较高的位置时遇到问题。我想让 twitter 图像更接近我的两个 blob 图像，并在 twitter 图像和“登录我的帐户”短语之间添加间距。此外，我正在尝试获取我的 UITextfield，我想现在它只是 TextField 在我的“登录您的帐户短语”下方单击时出现在键盘上，但这现在显示在我的视图中。

请查看附件中发生的事情的图片。

    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")

            
        
    

【参考方案1】：

要向上移动任何元素，请使用：

.offset(y: -200.0)

要增加 VStack 中元素之间的间距，请按如下方式声明：

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

同样使用 TextField，您需要一个值来将其绑定到：

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

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

【参考方案2】：

我只是总结了你应该在这里做的所有事情：

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

身体上方：

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

希望你得到你想要的。