ios – Making some Sections .plain and a few .insertGrouped in a SwiftUI Record

It’s certainly unnecessarily troublesome to realize this straightforward unfavorable indentation of a single part when the Record is insetGrouped.

The unusual factor is that if it is solely .inset, you possibly can add padding, but when it is .insetGrouped you can not take away horizontal padding so far as the part background goes (so far as I can inform).

So the one approach I see to realize that is by doing precisely that: setting the record to .listStyle(.inset) after which including again the mandatory types.

To keep away from repeating the identical types for each part, I created view extensions. If you want, you possibly can additional add ViewModifier structs for every, however it’s going to work with out them.

struct ExampleImage: View {
    var url: String
    var physique: some View {
        AsyncImage(url: URL(string: url)!) { part in
            change part {
                case .empty:
                    ProgressView()
                        .body(width: 175, peak: 225)
                case .success(let picture):
                    picture
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .body(width: 175, peak: 225)
                        .clipped()
                        .cornerRadius(10)
                    
                case .failure:
                    Picture(systemName: "picture")
                        .resizable()
                        .aspectRatio(contentMode: .match)
                        .body(width: 175, peak: 225)
                        .foregroundColor(.grey)
                @unknown default:
                    EmptyView()
                        .body(width: 175, peak: 225)
            }
        }
    }
}

struct AddPhotoView: View {
    var physique: some View {
        Button(motion: {}) {
            VStack(spacing: 5) {
                Picture(systemName: "digital camera.fill")
                    .font(.system(measurement: 14))
                Textual content("Add Picture").font(.caption2).daring()
            }.body(minWidth: 100, minHeight: 225)
                .background(Colour(.systemGray6))
                .cornerRadius(10)
        }
    }
}

struct ImageGallery: View {
    var physique: some View {
        ScrollView(.horizontal) {
            HStack {
                ExampleImage(url:  "https://add.wikimedia.org/wikipedia/commons/b/b1/Van-willem-vincent-gogh-die-kartoffelesser-03850.jpg")
                ExampleImage(url :"https://add.wikimedia.org/wikipedia/commons/8/87/Vincent_van_Gogh_-_Head_of_a_skeleton_with_a_burning_cigarette_-_Google_Art_Project.jpg")
                ExampleImage(url: "https://add.wikimedia.org/wikipedia/commons/6/66/VanGogh-starry_night_ballance1.jpg")
                AddPhotoView()
            }
            // .padding(.horizontal, 12)
        }
    }
}

extension View {
    func listRowPadding() -> some View {
        self
            .padding(.horizontal, 20)
            .listRowInsets(EdgeInsets())
            .listRowSeparator(.hidden)
            .body(maxWidth: .infinity, maxHeight: .infinity, alignment: .main)
            .background(Colour(UIColor.secondarySystemGroupedBackground), in: RoundedRectangle(cornerRadius: 10))
    }
    
    func listSectionPadding() -> some View {
        self
            .padding(.horizontal, 20)
    }
}

#Preview {
    NavigationStack {
            Record {
                Part(header: Textual content("Deal with")) {
                    VStack {
                        Textual content("No Deal with Specified")
                            .foregroundColor(.secondary)
                    }
                    .listRowPadding()
                }
                .listSectionPadding()
                
                Part("Hyperlinks") {
                    VStack(spacing: 10) {
                        NavigationLink {
                            EmptyView()
                        } label: {
                            Label {
                                Textual content("Menu")
                                
                            } icon: {
                                Picture(systemName: "menucard")
                                    .foregroundColor(.main)
                            }
                        }
                        
                        Divider()
                            .padding(.main, 40)
                            .padding(.trailing, -20)
                        
                        NavigationLink {
                            EmptyView()
                        } label: {
                            Label {
                                Textual content("Examine-Ins")
                            } icon: {
                                Picture(systemName: "clock.badge.checkmark")
                                    .foregroundColor(.main)
                            }
                        }
                    }
                    .padding(.vertical, 10) // interior VStack padding
                    .listRowPadding()
                }
                .listSectionPadding()
                
                Part("Gallery") {
                    ImageGallery()
                        .background(Colour(UIColor.systemBackground), in: Rectangle()) // to clear the background
                        .padding(.horizontal, -40)
                        .listRowPadding()
                }
                .listSectionPadding()

            }
            .listStyle(.inset)
            // .padding(.horizontal, -20)
            .listSectionSpacing(0)
        
            .navigationBarTitleDisplayMode(.inline)
            .navigationTitle("Place Identify")
    }
}

This isn’t an ideal resolution, as a result of it nonetheless requires to tweak vertical spacing if a piece would not have a title, however it’s going to largely obtain the format you have been after.

If a piece title for the gallery just isn’t wanted, simply take away it from a piece and add a prime padding to the gallery. Or, preserve the part and set the title to an empty string (“”) and add some unfavorable prime padding to the gallery.