使用 SwiftUI 进行简单（但复杂）的布局设计

Question

我正在尝试使用 SwiftUI 编写一个简单的布局设计，但没有成功！

这是我想做的事情：

ScrollView {
    VStrack {
        // Header with an orange background.
        // This orange color should also apply to the status bar.
    }
    VStrack {
        // Content with a white background.
        // This white color should always go to the bottom.
    }
}

我首先尝试将橙色背景应用到第一个 VStack 并将白色背景应用到第二个 VStack 但我无法将状态栏着色为橙色即使 .ignoresSafeArea().

然后我尝试对 ScrollView 应用橙色背景，对第二个 VStack 再次应用白色背景，但即使 .infinity.

我也试过 LazyVStack 但没有任何反应。

你们有什么想法让这个工作吗？ :-)

Answer 1

您可以尝试将内容的高度设置为至少屏幕高度：

.frame(minHeight: UIScreen.screenHeight)

完整视图正文的示例代码（可以将HStack替换为VStack，只要填满宽度即可）：

        ScrollView {
            HStack {
                Spacer()
                Text("Header")
                Spacer()
            }
            .padding()
            .background(.orange)
            
            HStack {
                Spacer()
                Text("Content")
                Spacer()
            }
            .padding()
            .frame(minHeight: UIScreen.screenHeight, alignment: .top)
            .background(.white)
        }
        .background(Color.orange.ignoresSafeArea(.all, edges: .top))

使用 SwiftUI 进行简单（但复杂）的布局设计

Simple (but complex) layout design with SwiftUI

xcode

swiftui