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

I am attempting to create a picture carousel inside a listing view in swift that goes to the sting of the display (no padding just like the default checklist view).

If I set the checklist view type to .plain, then the HStack for the picture carousel will go to the sting of the display with out and border radius within the corners, but it surely removes the great part formatting that comes with .insetGrouped. And the .insetGrouped prevents the HStack from reaching the sting of the display.

I am looking for a approach to have the great part formatting and still have the picture carousel go the sting.

Here is what I’ve proper now:

import SwiftUI

struct ExampleImage: View {
  var url: String
  var physique: some View {
    AsyncImage(url: URL(string: url)!) { part in
           swap part {
           case .empty:
               ProgressView()
               .body(width: 175, top: 225)
           case .success(let picture):
               picture
                   .resizable()
                   .aspectRatio(contentMode: .fill)
                   .body(width: 175, top: 225)
                   .clipped()
                   .cornerRadius(10)

           case .failure:
               Picture(systemName: "picture")
                   .resizable()
                   .aspectRatio(contentMode: .match)
                   .body(width: 175, top: 225)
                   .foregroundColor(.grey)
           @unknown default:
               EmptyView()
               .body(width: 175, top: 225)
           }
       }
  }
}

struct AddPhotoView: View {
  var physique: some View {
    Button(motion: {}) {
      VStack(spacing: 5) {
        Picture(systemName: "digicam.fill")
          .font(.system(dimension: 14))
        Textual content("Add Photograph").font(.caption2).daring()
      }.body(minWidth: 100, minHeight: 225)
        .background(Coloration(.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)
      }
    }
}

#Preview {
    NavigationStack {
      VStack(spacing: 0) {
        Listing {
          
          Part(header: Textual content("Tackle")) {
            Textual content("No Tackle Specified")
              .foregroundColor(.secondary)
          }
          
          Part {
            NavigationLink {
              EmptyView()
            } label: {
              Label {
                Textual content("Menu")
                
              } icon: {
                Picture(systemName: "menucard")
                  .foregroundColor(.major)
              }
            }
            NavigationLink {
              EmptyView()
            } label: {
              Label {
                Textual content("Test-Ins")
              } icon: {
                Picture(systemName: "clock.badge.checkmark")
                  .foregroundColor(.major)
              }
            }
          }
          ImageGallery()
            .listRowInsets(EdgeInsets(high: 0, main: 0, backside: 0, trailing: 0))
        }
        .listSectionSpacing(15)
      }
      // Allow this to have the picture carousel increase to the complete width of the display
      // .listStyle(.plain)
      .navigationBarTitleDisplayMode(.inline)
      .navigationTitle("Place Title")
    }
}

would not go to the sting with .insetGrouped

goes to the sides with .plain: