SwiftUI：如何将VStack中的TextField子视图居中至主视图

要让TextField单独居中在屏幕中央，同时保持subtitle和entries在其下方，可以通过调整VStack内的空间分配实现，核心是利用Spacer控制垂直布局：

修改content()方法的结构，在TextField上方添加充满剩余空间的Spacer，将TextField推至屏幕垂直中心；下方添加最小长度为0的Spacer，确保后续元素紧贴TextField下方：

private func content() -> some View {
    VStack(spacing: 16) {
        // 顶部Spacer填充TextField到屏幕顶部的所有空间，将TextField推至垂直中心
        Spacer()
        textField()
        subtitle()
        entries()
        // 底部Spacer仅填充必要空间，让后续元素紧贴TextField下方
        Spacer(minLength: 0)
    }
    .padding(10)
    .background(Color.yellow)
}

完整修改后的代码 #

import SwiftUI

struct ContentView: View {
    // MARK: - Private Properties
    
    @State private var input: String = ""
    
    @State private var inputs: [String] = []
    
    // MARK: - Body
    
    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            content()
                .frame(maxHeight: .infinity)
            
            saveButton()
        }
        .frame(maxHeight: .infinity)
        .background(Color.brown)
    }
    
    // MARK: - Views
    
    private func content() -> some View {
        VStack(spacing: 16) {
            Spacer()
            textField()
            subtitle()
            entries()
            Spacer(minLength: 0)
        }
        .padding(10)
        .background(Color.yellow)
    }
    
    private func textField() -> some View {
        TextField("TextField", text: $input)
            .font(Font.largeTitle)
            .padding(.horizontal, 20)
            .background(Color.red)
    }
    
    private func subtitle() -> some View {
        Text("Text")
            .background(Color.white)
    }
    
    private func entries() -> some View {
        ForEach(inputs, id: \.self) {
            Text($0)
        }
        .background(Color.purple)
    }
    
    private func saveButton() -> some View {
            Button(action: { inputs.append(input); input = "" },
                   label: { Text("Save") })
            .padding()
    }
}

原理说明 #

• 顶部的Spacer()会自动填充从TextField到屏幕顶部的所有可用垂直空间，迫使TextField移动到屏幕的垂直中心位置。
• 底部的Spacer(minLength: 0)不会占据额外空间，只会确保subtitle和entries紧贴TextField下方显示，同时允许它们延伸到屏幕底部（当内容较多时）。
• 原代码中VStack默认会将所有子元素整体居中，通过添加Spacer可以精准控制单个元素的位置，而不改变其他元素的相对布局。

内容的提问来源于stack exchange，提问作者Nick Sorge