SwiftUI 中的填充、偏移或位置

Posted 2023-02-24

【中文标题】SwiftUI 中的填充、偏移或位置

【英文标题】：Padding, offset, or position in SwiftUI

【发布时间】：2021-06-02 19:39:18

【问题描述】：

我正在尝试定位一个圆，使其中心位于这样的矩形顶部。圆的直径不必与矩形的宽度相同。

我想了解的是，实现这一目标的最佳和最实用的方法是什么？在这种情况下，我应该使用填充、偏移或位置吗？它是否适用于不同的设备/屏幕尺寸？好像哪一个都可以用，但哪个更理想呢？

这就是我使用padding 的结果。我可以增加底部填充以达到我想要的效果，但不确定这是否是最好的方法。

Rectangle()
    .fill(Color.gray)
    .frame(width: 85, height: 175)
    .overlay(
        Circle()
            .fill(Color.black)
            .frame(width: 120)
            .padding(.bottom, 50)
    )

【参考方案1】：

对于形状，一个好的方法是像这样组合叠加和偏移：

Rectangle()
    .fill(Color.red)
    .frame(width: 100, height: 180)
    .overlay(
        Circle()
            .fill(Color.blue.opacity(0.5))
            .frame(width: 100)
            .offset(y: -90)
    )

【讨论】：

如果将图像叠加到形状上，您还会使用偏移量还是其他一种？

是的，叠加/偏移可以很好地协同工作，无论它们应用于何种视图

【参考方案2】：

这是一种可能的方法 - 仅使用对齐而不用硬编码偏移/位置。

使用 Xcode 12.4 / ios 14.4 准备的演示

var body: some View 
    Rectangle()
        .fill(Color.gray)
        .frame(width: 85, height: 175)
        .overlay(
            Circle()
              .stroke(Color.black,
                    style: StrokeStyle(
                         lineWidth: 2,
                         lineCap: .round,
                         lineJoin: .miter,
                         miterLimit: 0,
                         dash: [5, 10],
                         dashPhase: 0
                    ))
              .frame(width: 85, height: 85)
              .alignmentGuide(.top)  $0[VerticalAlignment.center]  // << this !!
        , alignment: .top)    // and this !!