List Sections

Question

I have this struct:

struct Final_Restaurant_View: View {

    var data: [RestaurantListViewModel]

    @State private var isHome = false

    var body: some View {

        NavigationView{

            VStack {

                List(data) {

                    data in

                        layout(data: data)

                }

                .listStyle(GroupedListStyle())

                Button(action: {

                    isHome = true

                }, label: {

                    Text("Go Home")

                })

                .padding()

            }

            .fullScreenCover(isPresented: $isHome, content: {

                ContentView()

            })

            .navigationBarTitle("Results")

        }

    }

}

Which is supposed to get data and display it in a list. The problem is that I can't find anything about sections on a table structured like this and therefore, it goes wack with the section title. Any Ideas???

432

Posted by

Mcrich23

Reply

Add a Comment

Answer 1

Thanks for showing the code. I could have reproduce the similar layout with the new code.

(I used simplified layout because I could not make it work but that was enough. By the way, you should better follow the naming rule of Swift when you write code in Swift.)

With this part:

                    List(data) {
                        data in
                        Section(header: Text("GroupPicks")) {
                            layout(data: data)
                        }
                    }

You are trying to add a section to each row of your List. Which causes the result as shown in your previous screen shot.

Putting Section inside List(data) { ... } does not make sense.

Please try something like this:

                if data.count == 0 {
                    Text("No Picks Found")
                } else {
                    List {
                        Section(header: Text("GroupPicks")) {
                            ForEach(data) {
                                data in
                                layout(data: data)
                            }
                        }
                    }
                    .listStyle(GroupedListStyle())
                    //.listStyle(PlainListStyle())
                    //.listStyle(InsetListStyle())
                }

Posted by

OOPer

It works! Thank you so much!

—
Mcrich23

Add a Comment

Answer 2

You have to create section headers.

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Important tasks")) {
                TaskRow()
                TaskRow()
                TaskRow()
            }

See details here:

h t t p s : / / swiftuirecipes.com/blog/grouped-list-in-swiftui
h t t p s : / / w w w.hackingwithswift.com/quick-start/swiftui/how-to-add-sections-to-a-list

Posted by

Claude31

Add a Comment

Answer 3

I tried that, but when I do that, this happens:

Simulator Screen Shot - iPhone 12 - 2021-09-03 at 14.55.04.png

Posted by

Mcrich23

Can you show your tried code? I cannot reproduce the same layout using Section.

—
OOPer
@OOper do you mean the content?

—
Mcrich23
I mean the code including Section which you tried. Or am I mistaking something and you have not tried Section yet?

—
OOPer

Answer 4

Here is the content:

struct layout: View {

    var data: RestaurantListViewModel

    var body: some View {

        HStack {

            URLImage(data.imageUrl) { image in

                image

                    .resizable()

                    .aspectRatio(contentMode: .fill)

                    .clipped()

                    .frame(maxWidth: 30, maxHeight: 30)

                    .padding()

            }

            Text(data.name)

                .padding()

            HStack {
                (rating logic)
            }

            Button(action: {

                print("opening site pressed")

                if let url = URL(string: data.url) {

                    UIApplication.shared.open(url)

                }

            }) {

//                Text("More Info")

                Image("yelp logo")

                    .resizable()

                    .aspectRatio(contentMode: .fit)

                    .frame(maxWidth: 30)

            }

        }

    }

}

Posted by

Mcrich23

I do not see the link between the screen capture and the code you post for contentView. In addition, there is no section defined in this code.

—
Claude31

Add a Comment

Answer 5

I am so sorry for the confusion, here is everything:

struct Final_Restaurant_View: View {

    var data: [RestaurantListViewModel]

    @State private var isHome = false

    var body: some View {

        NavigationView{

            VStack {

                if data.count == 0 {

                    Text("No Picks Found")

                }else {

                    List(data) {

                        data in

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

                            layout(data: data)

                        }

//                        layout(data: data)

                    }

                    .listStyle(GroupedListStyle())

                }

                Button(action: {

                    isHome = true

                }, label: {

                    Text("Go Home")

                })

                .padding()

            }

            .fullScreenCover(isPresented: $isHome, content: {

                ContentView(join: false)

            })

            .navigationBarTitle("Results")

        }

    }

}

struct layout: View {

    var data: RestaurantListViewModel

    var body: some View {

        HStack {

            URLImage(data.imageUrl) { image in

                image

                    .resizable()

                    .aspectRatio(contentMode: .fill)

                    .clipped()

                    .frame(maxWidth: 30, maxHeight: 30)

                    .padding()

            }

            Text(data.name)

                .padding()

            HStack {
                (Star Rating Logic
            }

            Button(action: {

                print("opening site pressed")

                if let url = URL(string: data.url) {

                    UIApplication.shared.open(url)

                }

            }) {

//                Text("More Info")

                Image("yelp logo")

                    .resizable()

                    .aspectRatio(contentMode: .fit)

                    .frame(maxWidth: 30)

            }

        }

    }

}

Posted by

Mcrich23

Add a Comment

Answer 6

Thanks for showing the code. I could have reproduce the similar layout with the new code.

(I used simplified layout because I could not make it work but that was enough. By the way, you should better follow the naming rule of Swift when you write code in Swift.)

With this part:

                    List(data) {
                        data in
                        Section(header: Text("GroupPicks")) {
                            layout(data: data)
                        }
                    }

You are trying to add a section to each row of your List. Which causes the result as shown in your previous screen shot.

Putting Section inside List(data) { ... } does not make sense.

Please try something like this:

                if data.count == 0 {
                    Text("No Picks Found")
                } else {
                    List {
                        Section(header: Text("GroupPicks")) {
                            ForEach(data) {
                                data in
                                layout(data: data)
                            }
                        }
                    }
                    .listStyle(GroupedListStyle())
                    //.listStyle(PlainListStyle())
                    //.listStyle(InsetListStyle())
                }

Posted by

OOPer

It works! Thank you so much!

—
Mcrich23

Add a Comment

List Sections

Accepted Reply

Replies