I want to achieve below visual presentation. A Form including sections like iPhone’s Settings app, but with a rounded visual element on the top. And I want them to scroll together and have the same background color.

Code:

NavigationStack {
    HStack {
        Image("JoinUs") // Demo purpose
            .resizable()
            .frame(maxWidth: 360)
            .aspectRatio(contentMode: .fit)
    }
    .background(.green)
    .mask { RoundedRectangle(cornerRadius: 25) }
    .padding()
    
    Form {
        Section {
            Text("Voice")
            Text("Speed")
            Text("Pitch")
            Text("Voice")
        } header: {
            Text("Sound")
        }
        
        Section {
            Text("Text Size")
        } header: {
            Text("System")
        }
        
        Section {
            Text("Voice")
            Text("Speed")
            Text("Pitch")
            Text("Voice")
        } header: {
            Text("Sound")
        }
        
        Section {
            Text("Voice")
            Text("Speed")
            Text("Pitch")
            Text("Voice")
        } header: {
            Text("Sound")
        }
    }
    .navigationTitle("Settings")

Here is what I got:

Two problems I observed:

• The white background of top HStack view. -> How to show the same background color, gray color in this case.
• The top HStack view is not scrolled per form scrolling -> Try to put it into the Form, could scroll together but with smaller size and also white background problem.