SwiftUI ZStack布局定位失效：如何将红色矩形移至蓝色区域左下角

• 冗余VStack嵌套导致默认居中对齐：红矩形外额外套了一层VStack，且给VStack设置了284*269的固定尺寸。VStack默认会将内部子视图在自身范围内水平、垂直居中，因此尺寸更小的红矩形会自然落在蓝块中心，这是当前红矩形无法移动的核心原因。
• padding修饰符的使用逻辑完全错位：添加的.padding(.leading, 0)、.padding(.bottom, 0)是作用在VStack本体上的，效果是控制VStack与父级ZStack的边距，由于边距值为0，完全没有可见变化，根本无法影响VStack内部红矩形的位置。
• 外层ZStack未配置自定义对齐规则：ZStack默认采用中心对齐排布所有内部子视图，即使去掉嵌套的VStack，不修改对齐规则的话红矩形依然会保持居中。

最简实现方式是去掉无意义的VStack嵌套，直接通过ZStack的内置对齐规则实现左下角定位，不需要额外计算偏移量、也不需要用Spacer占位：

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottomLeading) { // 直接指定ZStack子视图的对齐规则为左下
            Rectangle()
                .fill(Color.red)
                .frame(width: 197, height: 163)
        }
        .frame(width: 284, height: 269)
        .background(Color.blue)
    }
}

关键逻辑说明 #

• 给ZStack初始化时传入alignment: .bottomLeading，会让所有放在ZStack内的子视图自动对齐到容器的左下角边缘，完全不需要手动计算位置偏移。
• 移除冗余的VStack后，整个层级更简洁，也避免了容器默认对齐规则带来的干扰。
• 不需要添加任何无效的padding修饰符，padding只会调整当前视图与父级的边距，无法用来定位容器内部的子元素。

如果必须保留原有VStack结构，也可以通过修改VStack对齐规则+添加Spacer占位实现相同效果：

ZStack {
    VStack(spacing: 0) {
        Spacer() // 占据VStack上半部分所有剩余空间，把红矩形推到容器底部
        Rectangle()
            .fill(Color.red)
            .frame(width: 197, height: 163)
    }
    .frame(width: 284, height: 269, alignment: .leading) // 给VStack设置水平左对齐
    .background(Color.blue)
}

• 不要试图用offset硬算位置：手动计算红矩形距离中心的偏移量虽然能出效果，但当容器尺寸变化时会出现适配问题，属于硬编码的不可维护写法。
• 不要把padding当内部定位工具：padding会撑大视图本身的尺寸，它的设计初衷是控制视图与父级的间距，不是用来调整视图内部子元素位置的。

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