SwiftUI中HStack内4个不同尺寸视图按比例对齐的实现方案

要让不同尺寸的四个视图分别对齐左侧、水平1/3处、2/3处和右侧，最靠谱的办法是用GeometryReader拿到父容器的精确宽度，然后通过position直接给每个视图定位到目标位置——这种方式完全不受视图自身尺寸影响，能严格按比例布局。

完整实现代码 #

import SwiftUI

struct YourCameraControlView: View { // 替换成你的视图名称
    @EnvironmentObject var captureDelegate: CaptureDelegate
    let images = ["person.slash.fill", "person.fill", "person.2.fill", "person.2.fill", "person.2.fill"]
    @Binding var timerPress: Bool
    
    private var rotationAngle: Angle {
        switch captureDelegate.orientationLast {
        case .landscapeRight:
            return .degrees(90)
        case .landscapeLeft:
            return .degrees(-90)
        default:
            return .degrees(0)
        }
    }
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .center) {
                // 左侧对齐的齿轮图标
                Image(systemName: "gearshape")
                    .resizable()
                    .frame(width: 25, height: 25)
                    .foregroundStyle(captureDelegate.cameraPressed ? Color(white: 0.4) : .white)
                    .disabled(captureDelegate.cameraPressed)
                    .rotationEffect(rotationAngle)
                    // 左边缘对齐容器左边缘：视图宽度的一半 + 左侧padding
                    .position(x: 25/2 + 15, y: geometry.size.height/2)
                    .onTapGesture {
                        if !captureDelegate.cameraPressed {
                            // 这里加你的点击逻辑
                        }
                    }
                
                // 水平1/3位置的计时器图标
                Image(systemName: "timer")
                    .resizable()
                    .frame(width: 25, height: 25)
                    .foregroundStyle(captureDelegate.cameraPressed ? Color(white: 0.4) : .white)
                    .disabled(captureDelegate.cameraPressed)
                    .rotationEffect(rotationAngle)
                    .position(x: geometry.size.width / 3, y: geometry.size.height/2)
                    .onTapGesture {
                        if !captureDelegate.cameraPressed {
                            timerPress.toggle()
                        }
                    }
                
                // 水平2/3位置的计时器图标
                Image(systemName: "timer")
                    .resizable()
                    .frame(width: 25, height: 25)
                    .foregroundStyle(captureDelegate.cameraPressed ? Color(white: 0.4) : .white)
                    .disabled(captureDelegate.cameraPressed)
                    .rotationEffect(rotationAngle)
                    .position(x: geometry.size.width * 2 / 3, y: geometry.size.height/2)
                    .onTapGesture {
                        if !captureDelegate.cameraPressed {
                            timerPress.toggle()
                        }
                    }
                
                // 右侧对齐的Picker组件
                Picker("Pick a number of people", selection: $captureDelegate.userSelectedNumber) {
                    ForEach(0...4, id: \.self) { i in
                        HStack(spacing: 70) {
                            Image(systemName: self.images[i])
                                .resizable()
                                .frame(width: 20, height: 20)
                                .rotationEffect(rotationAngle)
                            
                            Text("\(i)")
                                .font(.system(size: 42))
                                .rotationEffect(rotationAngle)
                        }
                        .tag(i)
                        .rotationEffect(rotationAngle)
                    }
                }
                .tint(.white)
                .clipped()
                .foregroundStyle(captureDelegate.cameraPressed ? Color(white: 0.4) : .white)
                .disabled(captureDelegate.cameraPressed)
                .rotationEffect(rotationAngle)
                .animation(.easeInOut(duration: 0.5), value: rotationAngle)
                // 右边缘对齐容器右边缘：容器宽度 - Picker宽度的一半 - 右侧padding
                .position(x: geometry.size.width - (pickerWidth/2) - 15, y: geometry.size.height/2)
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
        }
        .font(.system(size: 24))
        .padding([.leading,.trailing], 15)
    }
    
    // 预先估算Picker的宽度，也可以用嵌套GeometryReader动态获取
    private var pickerWidth: CGFloat {
        return 150 // 根据你的Picker实际内容调整这个值
    }
}

关键逻辑说明 #

• GeometryReader：拿到父容器的真实宽度，确保在不同屏幕尺寸下布局比例都准确。
• position定位：
  • 左侧视图：用自身宽度的一半加上padding，保证左边缘和容器左边缘对齐。
  • 中间两个视图：直接用容器宽度的1/3和2/3作为x坐标，让视图中心精准落在目标比例位置。
  • 右侧Picker：用容器宽度减去自身宽度的一半再减去padding，保证右边缘和容器右边缘对齐。
• Picker宽度处理：因为Picker尺寸比其他视图大，需要提前估算或动态获取它的宽度，避免定位偏移。如果要更精准，可以给Picker套一个GeometryReader实时获取宽度。

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