有没有办法在 ZStack 中使用 Spacer() ？（斯威夫特用户界面）答案

【问题标题】：Is there a way to use Spacer() in a ZStack? (SwiftUI)有没有办法在 ZStack 中使用 Spacer() ？（斯威夫特用户界面）
【发布时间】：2020-09-18 00:51:50
【问题描述】：

我通过 ZStack 在矩形顶部有文本，我想知道是否有办法限制矩形内的 Spacer() 数量。

           ZStack{
                Rectangle()
                    .frame(width: geometry.size.width,
                           height: geometry.size.height/3.25)
                    .shadow(radius: 5)
                    .foregroundColor(Color.white)
                
                //Words ontop of the Rectangle
                VStack {
                    HStack {
                        Spacer()
                        Text("Hello World")
                    }.padding(.trailing, 40)
                
                Spacer() //<-- PROBLEM HERE
                }//.offset(y: -40)
            }

看起来像什么

tl;博士：我希望“Hello World”在使用 Spacer() 时不会越过矩形的边界。我怎样才能做到这一点？谢谢

【问题讨论】：

标签： swiftui

【解决方案1】：

我认为只需使用 ZStack 并指定 .topTrailing 对齐方式即可实现您想要完成的任务：

struct ContentView: View {
    
    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .topTrailing) {
                Rectangle()
                    .frame(height: geometry.size.height/3.25)
                    .shadow(radius: 5)
                    .foregroundColor(Color.white)

                Text("Hello World")
                    .padding(.trailing, 40)
            }
            .frame(maxHeight: .infinity)
        }
    }
}

或者：

您可以放弃ZStack 并将Text 变成.overlay() 的Rectangle()。在这里，我保留了您的 VStack，只是将其设为 overlay，以防止它超出 Rectangle。

struct ContentView: View {
    
    var body: some View {
        GeometryReader { geometry in
            Rectangle()
                .frame(height: geometry.size.height/3.25)
                .shadow(radius: 5)
                .foregroundColor(Color.white)
                .overlay(
                    VStack {
                        HStack {
                            Spacer()
                            Text("Hello World")
                        }.padding(.trailing, 40)
                    
                        Spacer()
                    }
                )
                .frame(maxHeight: .infinity)
        }
    }
}

【讨论】：