SwiftUI 按百分比对齐视图

Question

使用 SwiftUI，我有一个占据设备宽度一定百分比的矩形，并在覆盖层中包含一个内部矩形。

struct ContentView: View {
    var body: some View {
        Rectangle()
            .fill(.purple)
            .containerRelativeFrame([.horizontal, .vertical]) { myWidth, axis in
                if axis == .horizontal {
                    return myWidth * 0.8
                } else {
                    return 40.0
                }
            }
            .overlay(CandyView(theWidth: 0.25), alignment: .leading)
            .cornerRadius(8.0)
    }
}

struct CandyView: View {
    var theWidth: CGFloat
    
    var body: some View {
        Rectangle()
            .fill(.white)
            .containerRelativeFrame([.horizontal, .vertical]) { myWidth, axis in
                if axis == .horizontal {
                    return myWidth * theWidth
                } else {
                    return 35.0
                }
            }
            .cornerRadius(7.0)
            .padding([.leading, .trailing], 3.0)
    }
}

这会给我这样的东西：

我可以通过更改对齐方式将内部矩形放置在另一侧或中间：

.overlay(CandyView(theWidth: 0.25), alignment: .leading)

但是如果我想将内部矩形沿着外部矩形放置 20% 该怎么办？有没有一种简单的方法来指定一个百分比以将其放置在我想要的位置？我不想使用

GeometryReader

，但我愿意接受建议。

Answer 1

您始终可以将覆盖层更改为包含间隔物+标记形状的

HStack

。

顺便说一句，您正在使用的

.overlay

修饰符已被弃用，建议使用

overlay(alignment:content:)

代替。另外，

.cornerRadius

已弃用，建议改为应用剪辑形状，或者仅使用

RoundedRectangle

作为基本形状：

RoundedRectangle(cornerRadius: 8)
    .fill(.purple)
    .containerRelativeFrame([.horizontal, .vertical]) { myWidth, axis in
        if axis == .horizontal {
            return myWidth * 0.8
        } else {
            return 40.0
        }
    }
    .overlay(alignment: .leading) {
        HStack(spacing: 0) {
            Color.clear
                .containerRelativeFrame(.horizontal) { width, axis in
                    width * 0.2
                }
            CandyView(theWidth: 0.25)
        }
    }

您可能会注意到，白色标记的宽度实际上是屏幕的 25%，而不是基础视图的 25%。这是因为，在这种情况下，

.containerRelativeFrame

的参考容器实际上是屏幕。请参阅文档了解更多详细信息。

---

分割视图的另一种方法是使用自定义

Layout

。 SwiftUI How to Set Specific Width Ratios for Child Elements in an HStack（这是我的答案）的答案中提供了示例实现。以下是它的使用方法：

.overlay(alignment: .leading) {
    WeightedHStack {
        Color.clear.layoutWeight(20)
        RoundedRectangle(cornerRadius: 7)
            .fill(.white)
            .frame(height: 35)
            .layoutWeight(25)
        Color.clear.layoutWeight(55)
    }
}

白色标记现在占基础视图的 25%，这可能就是您在原始示例中的预期效果。