Simple (but complex) layout design with SwiftUI-CodePudding

I'm trying to code a simple layout design with SwiftUI without success!

Here's what I'd like to do:

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.
    }
}

I first tried to apply an orange background to the first VStack and a white background to the second VStack but I couldn't color the status bar in orange even with .ignoresSafeArea().

Then I tried to apply an orange background to the ScrollView and a white background again to the second VStack but I couldn't color the bottom of the screen in white even with .infinity.

I also tried to use LazyVStack but nothing happened.

Do you guys have any idea to make this works? :-)

CodePudding user response：

You can try setting the height of the content to be at least the screen height:

.frame(minHeight: UIScreen.screenHeight)

Here's the sample code of the full view's body (you can replace the HStacks with VStacks, as long as you fill the width):

        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))