将屏幕外的 SwiftUI 视图居中 使用偏移量(x:y:)

问题描述

我正在尝试创建一个水平居中圆的屏幕，该圆大于实际屏幕的宽度。不幸的是，我不知道如何水平居中和将其固定到顶部。有没有一种简单的方法可以使用 SwiftUI 实现这样的结果？

struct DemoView: View {
    private let circleBackgroundPercentage: CGFloat = 1.3
    
    var body: some View {
        ZStack {
            GeometryReader { geometry in
                vstack(alignment: .center) {
                    Circle()
                        .fill(Color.yellow)
                        .frame(width: geometry.size.width * circleBackgroundPercentage,height: geometry.size.height * circleBackgroundPercentage,alignment: .center)
                }
            }
            Text("Demo")
        }.edgesIgnoringSafeArea(.all)
    }
}

]

解决方法

这是解决此类任务的可能方法。

已准备好 Xcode 12.4/iOS 14.4

var body: some View {
    ZStack {
        VStack {
            Color.yellow
                .clipShape(Circle())
            Color.clear
        }
        .scaleEffect(1.8)   // << tune factor as needed !!
        Text("Demo")
    }.edgesIgnoringSafeArea(.all)
}

,

使用偏移量(x:y:)

按指定的水平和垂直距离偏移此视图。 - https://developer.apple.com

水平居中对齐。

.offset(x: -(((geometry.size.width * circleBackgroundPercentage) - geometry.size.width)) / 2)

---

您可以对 y 位置使用类似的技术将圆圈固定在顶部。

---

您也可以使用 position(x:y:)。欲了解更多信息，请阅读这篇文章 https://www.hackingwithswift.com/books/ios-swiftui/absolute-positioning-for-swiftui-views