SwiftUI：如何将List居中显示在VStack父视图中？

问题原因 #

List在SwiftUI中默认会尽可能占据父视图的所有可用垂直空间，导致你添加的Spacer无法将其推到视图中央——List已经填满了中间的空间，Spacer没有多余的空间来挤压布局。

解决方法 #

方法一：让List自适应内容高度

给List添加fixedSize(horizontal: false, vertical: true)，让它在垂直方向上仅占用内容所需高度，不再填充整个父视图空间。此时VStack的Spacer就能将List推到中央：

var body: some View {
    VStack(alignment: .center) {
        Spacer()
        
        List {
            Section {
                Text("Row 1")
                Text("Row 2")
            } header: {
                Text("Header")
                    .font(.title3)
                    .padding()
            } footer: {
                Text("Footer")
                    .font(.body)
                    .padding()
            }
        }
        .listStyle(.insetGrouped)
        .fixedSize(horizontal: false, vertical: true) // 关键设置
        
        Spacer()
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .environment(\.defaultMinListRowHeight, 50)
}

方法二：给List设置固定高度

如果需要List保持固定高度，可以直接给List添加frame(height: ...)，同样能让Spacer将其推到中央：

var body: some View {
    VStack(alignment: .center) {
        Spacer()
        
        List {
            Section {
                Text("Row 1")
                Text("Row 2")
            } header: {
                Text("Header")
                    .font(.title3)
                    .padding()
            } footer: {
                Text("Footer")
                    .font(.body)
                    .padding()
            }
        }
        .listStyle(.insetGrouped)
        .frame(height: 300) // 固定高度，可根据需求调整
        
        Spacer()
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .environment(\.defaultMinListRowHeight, 50)
}

内容的提问来源于stack exchange，提问作者Deepak Sharma