Ios 嵌入SwiftUI中的滚动视图时，VStack中的内容会缩小

我有一个简单的登录屏幕，有两个文本字段和一个按钮。应该是这样的。两个文本字段靠得更近，按钮向下一点

这是我的密码

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()
            InputTextField(title: "First Name", text: .constant(""))
            InputTextField(title: "Last Name", text: .constant(""))
            Spacer()
            ActionButton(title: "Login", action: {})
            Spacer()
        }
    }
}


struct InputTextField: View {
    let title: String
    
    @Binding var text: String
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(title)
                .foregroundColor(.primary)
                .fontWeight(.medium)
                .font(.system(size: 18))
            
            HStack {
                TextField("", text: $text)
                    .frame(height: 54)
                    .textFieldStyle(PlainTextFieldStyle())
                    .cornerRadius(10)
            }
            .padding([.leading, .trailing], 10)
            .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.gray, lineWidth: 0.6))
        }
        .padding()
    }
}


struct ActionButton: View {
    let title: String
    var action: () -> Void

    var body: some View {
        Button(title) {
            action()
        }
        .frame(minWidth: 100, idealWidth: 100, maxWidth: .infinity, minHeight: 60, idealHeight: 60)
        .font(.system(size: 24, weight: .bold))
        .foregroundColor(.white)
        .background(Color.blue)
        .cornerRadius(10)
        .padding([.leading, .trailing])
        .shadow(color: Color.gray, radius: 2, x: 0, y: 2)
    }
}

我想把它嵌入一个

滚动视图

，这样用户可以在键盘打开时上下滚动

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                Spacer()
                InputTextField(title: "First Name", text: .constant(""))
                InputTextField(title: "Last Name", text: .constant(""))
                Spacer()
                ActionButton(title: "Login", action: {})
                Spacer()
            }
        }
    }
}

这就是我遇到这个问题的地方。当我将

VStack

添加到

ScrollView

中时，所有的内容都会收缩并显示在一起。当在

滚动视图中时，
间隔符
似乎不起作用


我怎样才能解决这个问题

正如您所发现的，当间隔符在滚动视图中与否时，它们的行为会有所不同，或者当它们可以展开的轴是无限轴或有限轴时，它们的行为也会有所不同

如果你想让你的内容在合适的时候垂直居中，在比屏幕大的时候滚动，我会这样做：

struct ContentView: View {
    var body: some View {
        VStack { // This new stack would vertically center the content
                 // (I haven't actually tried it though)
            ScrollView {
                VStack {
                    Spacer().size(height: MARGIN) // The minimum margin you want
                    InputTextField(title: "First Name", text: .constant(""))
                    InputTextField(title: "Last Name", text: .constant(""))
                    Spacer().size(height: SPACING)
                    ActionButton(title: "Login", action: {})
                    Spacer().size(height: MARGIN)
                }
            }
        }
    }
}

正如您所发现的，当间隔符在ScrollView中或不在ScrollView中时，它们的行为会有所不同，或者当它们可以展开的轴是无限轴或有限轴时，它们的行为也会有所不同

如果你想让你的内容在合适的时候垂直居中，在比屏幕大的时候滚动，我会这样做：

struct ContentView: View {
    var body: some View {
        VStack { // This new stack would vertically center the content
                 // (I haven't actually tried it though)
            ScrollView {
                VStack {
                    Spacer().size(height: MARGIN) // The minimum margin you want
                    InputTextField(title: "First Name", text: .constant(""))
                    InputTextField(title: "Last Name", text: .constant(""))
                    Spacer().size(height: SPACING)
                    ActionButton(title: "Login", action: {})
                    Spacer().size(height: MARGIN)
                }
            }
        }
    }
}

在这里，您需要通过如下所示的最小高度来拉伸内容以填充整个滚动视图

struct ContentView: View {
  var body: some View {
    GeometryReader { gr in
        ScrollView {
            VStack {
                Spacer()
                InputTextField(title: "First Name", text: .constant(""))
                InputTextField(title: "Last Name", text: .constant(""))
                Spacer()
                ActionButton(title: "Login", action: {})
                Spacer()
            }
            .frame(minHeight: gr.size.height)
        }
    }
  }
}

以下是输出：

在这里，您需要通过如下所示的最小高度来拉伸内容以填充整个滚动视图

struct ContentView: View {
  var body: some View {
    GeometryReader { gr in
        ScrollView {
            VStack {
                Spacer()
                InputTextField(title: "First Name", text: .constant(""))
                InputTextField(title: "Last Name", text: .constant(""))
                Spacer()
                ActionButton(title: "Login", action: {})
                Spacer()
            }
            .frame(minHeight: gr.size.height)
        }
    }
  }
}

以下是输出：