如何在SwiftUI中按百分比对齐视图？

这里有两种简便的方法，都能满足你把内部CandyView放到外部紫色矩形20%位置的需求，且无需使用GeometryReader：

方法一：自定义对齐指南（alignmentGuide） #

通过alignmentGuide精准控制视图位置，代码示例如下：

struct ContentView: View {
    var body: some View {
        // 外部紫色矩形，占设备宽度80%
        Rectangle()
            .fill(.purple)
            .frame(width: UIScreen.main.bounds.width * 0.8)
            .overlay(alignment: .leading) {
                CandyView()
                    .alignmentGuide(.leading) { outerRectDims in
                        // 外部矩形的宽度等于其trailing到leading的距离，乘以0.2即为20%位置
                        outerRectDims[.trailing] * 0.2
                    }
            }
    }
}

struct CandyView: View {
    var body: some View {
        Rectangle()
            .fill(.white)
            .frame(width: 50, height: 50) // 可根据需求调整尺寸
    }
}

核心逻辑是自定义对齐规则：让内部视图的左边缘，对齐到外部矩形宽度的20%位置，全程无需读取全局几何信息。

方法二：占位视图法 #

用透明占位视图占住外部矩形20%的宽度，直接放置目标视图，逻辑更直观：

struct ContentView: View {
    var body: some View {
        Rectangle()
            .fill(.purple)
            .frame(width: UIScreen.main.bounds.width * 0.8)
            .overlay {
                HStack(spacing: 0) {
                    // 透明占位，宽度为外部矩形的20%
                    Color.clear.frame(width: UIScreen.main.bounds.width * 0.8 * 0.2)
                    CandyView()
                    Spacer() // 占据剩余空间
                }
            }
    }
}

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