为什么我的 SF Symbol 在 Xcode 中出现在屏幕上

Question

这里看看符号框是如何离开页面的：

我的代码：

ZStack {
    Image("night").ignoresSafeArea()
    
    VStack {
        
        Spacer().frame(height: 260)
        
        Text("Melbourne, Victoria")
            .font(.largeTitle)
            .fontWeight(.bold)
            .foregroundColor(Color.white)
        
        Spacer().frame(height: 25)
        
        Image(systemName: "moon.fill")
            .foregroundColor(Color.white)
            .font(.system(size: 60))
        
        
        
        Spacer()
        
        Text("Today")
            .font(.title)
            .fontWeight(.medium)
            .foregroundColor(Color.white)
        
        Text("34°C")
            .font(.title3)
            .fontWeight(.medium)
            .foregroundColor(Color.white)
        
        Spacer().frame(height: 780)
        
        HStack {
            
            Image(systemName: "sun.max.fill")
                .foregroundColor(Color.white)
                .font(.system(size: 60))
            
        }
        
    }
    
}

如您所见，我放置了 SF 符号，但在预览中它离开了页面。有什么办法解决吗？

Answer 1

您的代码有 2 个问题导致了这个奇怪的结果：

1. 您的Image("night") 是一个巨大的图像并溢出屏幕。为防止这种情况，请尝试将其设置为 VStack 的背景。这是一个非常相似的question。
2. 您有很多Spacers，包括Spacer().frame(height: 780) 和@jnpdx commented。去掉它。 通常，当您将.frame 添加到Spacer 时，您需要padding。我已经用下面的paddings 替换了各种Spacer().frame(height: ...)s。

struct ContentView: View {
    var body: some View {
        
        VStack {
            Text("Melbourne, Victoria")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(Color.white)
                .padding(.bottom, 25)
            
            Image(systemName: "moon.fill")
                .foregroundColor(Color.white)
                .font(.system(size: 60))
            
            
            Text("Today")
                .font(.title)
                .fontWeight(.medium)
                .foregroundColor(Color.white)
            
            Text("34°C")
                .font(.title3)
                .fontWeight(.medium)
                .foregroundColor(Color.white)
            
            Spacer()
            
            HStack {
                Image(systemName: "sun.max.fill")
                    .foregroundColor(Color.white)
                    .font(.system(size: 60))
            }
            
        }
        .background(
            Image("night")
                .ignoresSafeArea()
        )
    }
}

结果：