SwiftUI：如何以非hack方式实现子视图在父VStack中垂直居中？

目前只能想到用overlay实现需求，但这种方式比较hack，想确认有没有更优方案。这个布局用于浮动窗口，包含3个带标题的正方形图片，设计要求图片在父视图中垂直居中。当前实现代码如下：

struct CaptionedRectView: View {
    let title: String
    
    var body: some View {
        Color.black
            .frame(width: 100, height: 100)
            .overlay(alignment: .bottom) {
                Text(title)
                    .padding(.bottom, -(100 * 0.5 + 16))
            }
    }
}

struct TestView: View {
    var body: some View {
        VStack {
            Spacer()
            HStack {
                CaptionedRectView(title: "Fe")
                CaptionedRectView(title: "Fi")
                CaptionedRectView(title: "Fo")
            }
            .overlay(alignment: .top) {
                Text("Long form title goes here")
                    .padding(.top, -30)
            }
            Spacer()
        }
        .background {
            Color.gray.opacity(0.2)
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Spacer()
            TestView()
                .frame(width: 1000, height: 300)
            Spacer()
        }
        .padding()
    }
}

当前方案虽能实现需求，但不够优雅，且手机端布局规则不同，标题需要纳入视图尺寸计算。以下是更优的实现思路：

优化方向1：重构单个带标题的正方形视图 #

放弃overlay+负padding的hack写法，改用SwiftUI原生布局组件实现，让标题自然纳入视图尺寸计算，同时保证正方形在父视图中垂直居中。

示例代码 #

struct CaptionedRectView: View {
    let title: String
    
    var body: some View {
        VStack(spacing: 0) {
            // 标题放在正方形上方，通过alignmentGuide调整位置，确保正方形垂直居中
            Text(title)
                .alignmentGuide(.verticalCenter) { dimension in
                    dimension[.verticalCenter] + (100 / 2 + 16)
                }
            Color.black
                .frame(width: 100, height: 100)
        }
        .fixedSize() // 保持视图紧凑尺寸，避免不必要的拉伸
    }
}

优化方向2：重构浮动窗口整体布局 #

移除Spacer+overlay的组合，改用ZStack实现元素层级，让顶部标题和正方形组的布局更清晰，同时适配不同设备尺寸。

示例代码 #

struct TestView: View {
    var body: some View {
        ZStack(alignment: .top) {
            // 背景层占满整个父视图
            Color.gray.opacity(0.2)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            // 正方形组垂直居中
            VStack {
                Spacer()
                HStack(spacing: 20) {
                    CaptionedRectView(title: "Fe")
                    CaptionedRectView(title: "Fi")
                    CaptionedRectView(title: "Fo")
                }
                Spacer()
            }
            
            // 顶部标题，通过padding控制与顶部的距离
            Text("Long form title goes here")
                .padding(.top, 20)
        }
    }
}

优化方案优势 #

• 避免硬编码的负padding，布局逻辑更清晰，适配不同尺寸的正方形或标题长度
• 所有元素均纳入视图尺寸计算，在手机端会自动适配屏幕，不会出现布局偏移或内容截断
• 符合SwiftUI声明式布局理念，代码更易读、易维护

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