如何渲染避免safeareaview？

Question

我希望状态栏和底部为白色（与根背景颜色相同），但不知道，我是否需要获取状态栏高度并添加顶部和底部边距？

这是我的代码和下面的预览

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(
            alignment: .leading,
            spacing: 10
        ) {
            Text("Title")
                .font(
                    .system(size: 32)
                        .weight(.heavy)
                )
            Text("Content")
        }
        .frame(
            minWidth: 0,
            maxWidth: .infinity,
            minHeight: 0,
            maxHeight: .infinity,
            alignment: .topLeading
        )
        .padding(
            EdgeInsets(
                top: 0,
                leading: 20,
                bottom: 0,
                trailing: 20
            )
        )
        .background(Color.gray)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
        }
    }
}

Answer 1

如果是我来处理这种 UI，我会使用 SwiftUI 为我们提供的其他一些不错的视图（例如 ZStack）。 ZStack 从下往上将对象一个接一个地放置。所以你会先想要你的颜色，然后是 VStack。它看起来像这样：

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.gray
        
            VStack(alignment: .leading, spacing: 10) {
                Text("Title")
                    .font(.system(size: 32).weight(.heavy))
                Text("Content")
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
            .padding()
        
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 2

添加垂直填充 1:

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Title")
                .font(.system(size: 32).weight(.heavy))
            Text("Content")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .padding(.horizontal, 20)
        .background(Color.gray)
        .padding(.vertical, 1) // here
    }
}

Answer 3

让我在不使用 .frame() 的情况下添加另一个采用不同方法的答案。相反，它使用 HStack 和 VStack 的完整宽度和高度来填充屏幕。对于状态栏和底部区域，此方法对灰色使用 .layoutPriority() 修饰符，但不允许它与安全区域重叠。

虽然其他答案工作得很好，但我用这个例子的目的是打开可能性的范围。

struct Example: View {
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 10) {
                Text("Title")
                    .font(
                        .system(size: 32)
                            .weight(.heavy)
                    )
                Text("Content")
                
                Spacer()   // This spacer will extend the VStack to full height
            }
            
            Spacer()   // This spacer will extend the HStack to full width
        }
        .padding()
        .background {
            VStack {
                
                // Status bar
                Color.clear
                    .ignoresSafeArea()
                
                // Rest of the view: gray has the priority but can't overlap
                // the status bar
                Color.gray
                    .layoutPriority(1)
            }
        }
    }
}

如何渲染避免safeareaview？

How to render avoiding safeareaview?

xcode

swift

swiftui