ios – utilizing SwiftUI 2022, how do I add content material (textual content, photographs and many others) to the highest of a Record() with out making use of Record styling?

As a semi-experienced React Native dev, I am model new to native iOS improvement (downloaded xcode for the primary time a couple of hours in the past), and I am attempting to develop a easy app for the aim of studying Swift.

I’ve the next view in my app: Hyperlink since this can be a new account and stack overflow wont let me embed

To attain this I merely used a VStack with my textual content, picture, and a Record containing the choices I need the person to pick out from:

struct GetStartedView: View {
    var physique: some View {
        NavigationView {
            VStack(alignment: .heart) {
                Textual content("Plan Your Subsequent Journey")
                    .font(.title)
                    .fontWeight(.ultraLight)
                    .multilineTextAlignment(.heart)
                    .padding()
                Picture("trail_placeholder")
                    .resizable()
                    .scaledToFill()
                    .aspectRatio(contentMode: .match)
                Record(trails) { path in
                    NavigationLink(vacation spot: TripView()) {
                        HStack(spacing: 10) {
                            Picture(path.picture)
                                .resizable()
                                .scaledToFill()
                                .padding(0.0)
                                .clipped()
                                .body(width: 55, peak: 50, alignment: .heart)
                                .clipShape(RoundedRectangle(cornerRadius: 10))
                            Textual content(path.title)
                        }
                    }
                }.listStyle(.plain)
                Spacer()
            }
        }
        .padding(.prime, -100.0)
        .navigationTitle("")
        .navigationBarHidden(true)
        
    }
}

Nevertheless when doing it this fashion, solely the underside part of the display scrolls (aka the Record). That is unintuitive and visually unappealing, so I need to have your entire web page scroll together with the listing gadgets

My first thought was to make use of a ScrollView containing these three issues, however this leaves me with a principally empty bugged out web page. After doing a little analysis, the consenus appeared to be “why are you utilizing a ScrollView when Record already scrolls? simply use Record.

So I went forward and tried to only use listing:

struct GetStartedView: View {
    var physique: some View {
        NavigationView {
            VStack(alignment: .heart) {
                Record() {
                    Textual content("Plan Your Subsequent Backpacking Journey")
                        .font(.title)
                        .fontWeight(.ultraLight)
                        .multilineTextAlignment(.heart)
                        .padding(.prime, -25.0)
                    Picture("trail_placeholder")
                        .resizable()
                        .scaledToFill()
                        .aspectRatio(contentMode: .match)
                    
                    ForEach(trails) { path in
                        NavigationLink(vacation spot: TripView()) {
                            HStack(spacing: 10) {
                                Picture(path.picture)
                                    .resizable()
                                    .scaledToFill()
                                    .padding(0.0)
                                    .clipped()
                                    .body(width: 55, peak: 50, alignment: .heart)
                                    .clipShape(RoundedRectangle(cornerRadius: 10))
                                Textual content(path.title)
                            }
                        }
                    }
                    
                }.listStyle(.plain)
                Spacer()
            }.navigationBarTitleDisplayMode(.inline)
        }
        .navigationTitle("check")
        .navigationBarHidden(false)
    }
}

Whereas this does end result within the conduct that I wished, I am left with some styling issues. Understandably, the Record is treating my header textual content and Picture as listing gadgets, which implies they’re styled as such. You possibly can see it on this screenshot the place the title is now main aligned, and there are two divider strains floating on the prime of the show.

How can I obtain this conduct whereas conserving regular styling for my non-list gadgets? I assume that utilizing Record isn’t actually the suitable method right here however I is likely to be incorrect. I do know I might use ScrollView + LazyVStack to make a facimile of this conduct, however it might be messier and require me to manually recreate the styling behind every listing merchandise.