List changing into a different mode in a different view

Question

Created Oct ’21

Replies 1

Boosts 0

Participants 2

Hello! I'm having an issue where my SwiftUI list changes into some different kind of list when I move it into a new view (see screenshots). How would I make it so it stays the same in both views?

(The view I want) Screen Shot 2021-10-13 at 7.48.14 AM.png

import SwiftUI



struct SheetListView: View {

    @State private var showGreeting = true

    var body: some View {

        List {

            HStack {

                Label("Expert mode", systemImage: "list.bullet.rectangle.portrait")

                    .font(.title2)

                Image(systemName: "questionmark.circle")

                    .foregroundColor(.gray)

                Spacer()

                Toggle("Expert Mode", isOn: $showGreeting)

                    .toggleStyle(.switch)

                    .labelsHidden()

            }



            Section(header: Text("Extras")) {

                Label("FAQ", systemImage: "bubble.left.and.exclamationmark.bubble.right")

                    .font(.title2)

                Label("Meet the maker", systemImage: "hand.wave")

                    .font(.title2)

                Label("Tips", systemImage: "dollarsign.square")

                    .font(.title2)

                Label("Credits", systemImage: "person.2")

                    .font(.title2)

            }



            Section(header: Text("Contact")) {

                Label("Contact me", systemImage: "envelope")

                    .font(.title2)

                Label("Report a bug", systemImage: "ant")

                    .font(.title2)

            }

        }

    }

}



struct SheetListView_Previews: PreviewProvider {

    static var previews: some View {

        SheetListView()

    }

}

(The view I get)

Screen Shot 2021-10-13 at 7.50.14 AM.png

import SwiftUI



struct SheetView: View {

    @Environment(\.dismiss) var dismiss



    var body: some View {

        NavigationView {

            VStack {

                SheetListView()



                Spacer()

                HStack {

                    Text("App version 0.1 (DEV)")

                        .foregroundColor(.gray)

                }

                .toolbar {

                    Button("Done") {

                        dismiss()

                    }

                    .font(.headline)

                    .padding()

                }

            }

            .background(Color(.systemGroupedBackground))

        }

    }

}



struct SheetView_Previews: PreviewProvider {

    static var previews: some View {

        SheetView()

    }

}

Boost

Answer 1

robnotyou OP

Oct ’21

Your SheetView NavigationView is using the default style of .columns.
You want .stack

Add this modifier to the SheetView NavigationView:

.navigationViewStyle(.stack)

Like this:

    var body: some View {
        NavigationView {
            VStack {
                SheetListView()

                Spacer()
                HStack {
                    Text("App version 0.1 (DEV)")
                        .foregroundColor(.gray)
                }
                .toolbar {
                    Button("Done") {
                        dismiss()
                    }
                    .font(.headline)
                    .padding()
                }
            }
            .background(Color(.systemGroupedBackground))
        }
        .navigationViewStyle(.stack) /// **.stack**
    }

Extra Hint: when pasting code to the forum, use "Paste and Match Style", to avoid the extra blank lines.

0