List Sections

UI Frameworks SwiftUI
Mcrich23
Mcrich23 OP
Created Sep ’21
Replies 5
Boosts 0
Views 1.5k
Participants 3

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

Answered by OOPer in 686971022

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())
                }
Replies  5
Boosts  0
Views  1.5k
Participants  3
Claude31
Claude31 OP
Sep ’21

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
0
Mcrich23
Mcrich23 OP
Sep ’21

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

0
Mcrich23
Mcrich23 OP
Sep ’21

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)
 
            }
 
        }
 
    }
 
}
0
Mcrich23
Mcrich23 OP
Sep ’21

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)
 
            }
 
        }
 
    }
 
}
0
OOPer
OOPer OP
Sep ’21
Accepted Answer

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())
                }
0
List Sections
First post date Last post date
 
 
Q