SwiftUI中多VStack圆角边缘适配不同屏幕尺寸问题咨询

问题描述 #

我有3个VStack，问题出在底部的2个VStack上。想要最后一个VStack的圆角矩形leading和trailing边缘与第二个VStack完全对齐，但不同iPhone机型下无法适配。试过固定值水平padding（如58）仅适配单一屏幕，用屏幕宽度百分比的padding（如geometry.size.width * 0.15）仍存在轻微偏差。

相关代码：

VStack
{
  stuff
}
.background(RoundedRectangle(cornerRadius: 5)
                        .fill(Color.white)
                        .shadow(radius: 1))
.padding()

VStack
{
  stuff
}
.background(RoundedRectangle(cornerRadius: 5)
                        .fill(Color.white)
                        .shadow(radius: 1))
//.padding(.horizontal, geometry.size.width * 0.15) // 接近但不对，切换iPhone屏幕尺寸仍有轻微偏差
//.padding([.leading, .trailing], 58) // 仅适配单一屏幕，需要修复

当前效果：

预期效果：

解决方案 #

方案1：统一父容器约束 #

将需要对齐的两个VStack放入同一个父VStack，给父容器设置统一的水平padding，两个子VStack的背景圆角会自动对齐，完美适配所有屏幕：

// 外层容器统一控制水平内边距和子视图间距
VStack(spacing: 16) {
    VStack {
        stuff
    }
    .background(RoundedRectangle(cornerRadius: 5)
        .fill(Color.white)
        .shadow(radius: 1))
    
    VStack {
        stuff
    }
    .background(RoundedRectangle(cornerRadius: 5)
        .fill(Color.white)
        .shadow(radius: 1))
}
.padding(.horizontal) // 可根据需求替换为safeAreaInsets或自定义逻辑
.padding(.vertical)

方案2：同步第一个VStack的宽度 #

利用PreferenceKey获取第一个VStack的实际宽度，强制第二个VStack匹配该宽度并居中，确保边缘完全对齐：

// 定义偏好键用于传递宽度值
struct WidthPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

// 视图实现
@State private var targetWidth: CGFloat = 0

VStack(spacing: 16) {
    VStack {
        stuff
    }
    .background(RoundedRectangle(cornerRadius: 5)
        .fill(Color.white)
        .shadow(radius: 1))
    .background(
        GeometryReader { proxy in
            Color.clear
                .preference(key: WidthPreferenceKey.self, value: proxy.size.width)
        }
    )
    
    VStack {
        stuff
    }
    .background(RoundedRectangle(cornerRadius: 5)
        .fill(Color.white)
        .shadow(radius: 1))
    .frame(width: targetWidth)
}
.padding()
.onPreferenceChange(WidthPreferenceKey.self) { newWidth in
    targetWidth = newWidth
}

方案3：自定义对齐指南 #

通过自定义HorizontalAlignment，给两个VStack设置相同的对齐基准，确保边缘严格对齐：

// 自定义对齐指南
extension HorizontalAlignment {
    private enum CustomLeading: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[HorizontalAlignment.leading]
        }
    }
    static let customLeading = HorizontalAlignment(CustomLeading.self)
}

// 视图实现
VStack(alignment: .customLeading, spacing: 16) {
    VStack {
        stuff
    }
    .background(RoundedRectangle(cornerRadius: 5)
        .fill(Color.white)
        .shadow(radius: 1))
    .alignmentGuide(.customLeading) { $0[.leading] }
    
    VStack {
        stuff
    }
    .background(RoundedRectangle(cornerRadius: 5)
        .fill(Color.white)
        .shadow(radius: 1))
    .alignmentGuide(.customLeading) { $0[.leading] }
}
.padding()

内容的提问来源于stack exchange，提问作者Zack Cheang Weng Seong