视图以超级视图为中心，视图位于 SwiftUI 的顶部

Question

我试图在 UIKit 中实现一些非常简单的事情 - 一个视图始终位于中心（图像），第二个视图（文本）位于其顶部，两个视图之间有一定的间距。我尝试了许多不同的方法（主要是使用alignmentGuide但没有任何效果如我所愿）。

代码：

ZStack {
    Rectangle()
        .foregroundColor(Color.red)
    
    VStack {
        Text("Test")
            .padding([.bottom], 20) // I want to define spacing between two views
        
        Image(systemName: "circle")
            .resizable()
            .alignmentGuide(VerticalAlignment.center, computeValue: { value in
                value[VerticalAlignment.center] + value.height
            })
            .frame(width: 20, height: 20)
    }
}
.frame(width: 100, height: 100)

结果：

正如您所看到的，图像并不完全居中，它实际上取决于Text. 有没有办法强制垂直和水平对齐在超级视图和布局第二个视图中居中而不影响居中视图？

Answer 1

我认为 \xe2\x80\x9c Correct\xe2\x80\x9d 执行此操作的方法是定义自定义对齐方式：

\n

extension VerticalAlignment {\n    static var custom: VerticalAlignment {\n        struct CustomAlignment: AlignmentID {\n            static func defaultValue(in context: ViewDimensions) -> CGFloat {\n                context[VerticalAlignment.center]\n            }\n        }\n        return .init(CustomAlignment.self)\n    }\n}\n

\n

然后，告诉您ZStack使用custom对齐方式，并使用alignmentGuide显式设置custom圆上的对齐方式：

\n

PlaygroundPage.current.setLiveView(\n    ZStack(alignment: .init(horizontal: .center, vertical: .custom)) {\n        Color.white\n\n        Rectangle()\n            .fill(Color.red)\n            .frame(width: 100, height: 100)\n\n        VStack {\n            Text("Test")\n            Circle()\n                .stroke(Color.white)\n                .frame(width: 20, height: 20)\n                .alignmentGuide(.custom, computeValue: { $0.height / 2 })\n        }\n    }\n            .frame(width: 300, height: 300)\n)\n

\n

结果：

\n

\n