swiftui - SwiftUI：在 SwiftUI 中使用 Spacer 垂直对齐动态大小的 Rectangle

Question

SwiftUI 中似乎存在潜在的错误。我正在尝试在图像顶部放置一个不透明度为 0.5 的矩形。

当我尝试将透明矩形固定在顶部时，从 100px 宽度开始，它会下降而不是粘在顶部。

这是代码：

      ZStack {
            VStack {
                Image("movistar")
                    .resizable(capInsets: EdgeInsets(), resizingMode: .stretch)
                    .scaledToFit()
                    .cornerRadius(8)
                    .padding(15)
                    .frame(minWidth: Global.SCREEN_WIDTH)
            }
            
            VStack {
                HStack {
                    Rectangle()
                        .fill(Color(red: 0, green: 0, blue: 0, opacity: 0.5))
                        .frame(width: 110, height: Global.SCREEN_WIDTH / 4)
                        
                }
                Spacer()
            }
            .scaledToFit()
            .cornerRadius(8)
            .padding(15)
            .frame(width: Global.SCREEN_WIDTH, height: Global.SCREEN_WIDTH)

标签： swiftui

Answer 1

这里没有错误。如果您将 .background 添​​加到所有图层，您将看到由于您设置视图的方式（即 Spacer、scaledToFit 等），视图的实际框架不一定是图像的边缘。您还没有设置任何堆栈或框架的对齐方式。

有很多方法可以做你想做的事，但我相信这是最简单的：

var body: some View {
    Image("movistar")
        .resizable(capInsets: EdgeInsets(), resizingMode: .stretch)
        .scaledToFit()
        .cornerRadius(8)
        .frame(minWidth: UIScreen.main.bounds.width)
        .overlay(
            Rectangle()
                .fill(Color(red: 0, green: 0, blue: 0, opacity: 0.5))
                .frame(width: 110, height: UIScreen.main.bounds.width / 4)
            , alignment: .top
        )
}