ios – SwiftUI – Bizarre situation whereas exhibiting a picture in rounded rectangle

In my app, I would like to point out pictures in rounded rectangle form on a horizontal scroll view and after I faucet on the picture, the picture opens in full display. I’ve a number of pictures, however for a similar of protecting it easy, I’ve 2 pictures in my pattern code under.

The second picture (Picture B) may be very huge. To elucidate this query in a straightforward approach, I’ve chosen first picture (Picture A) with 2 shades (yellow and crimson). Should you faucet on crimson shade of Picture A, the app behaves as if Picture B was tapped and opens Picture B as an alternative of opening Picture A. Tapping on yellow shade of Picture A, opens Picture A appropriately.

That is occurring as a result of Picture B is huge and I’m utilizing picture.resizeable().aspectRatio(**.fill**) to show pictures in a rounded rectangle form. If I take advantage of picture.resizeable().aspectRatio(**.match**), then faucet habits works high-quality i.e. if crimson shade of Picture A is tapped, then app opens Picture A itself, nevertheless with aspectRatio(.match), the photographs do not get displayed as rounded rectangle.

Executable pattern code:

import SwiftUI

struct Foo {
    var title: String
    var url: String
    var picture: Picture?
    
    init(title: String, url: String, picture: Picture? = nil) {
        self.title = title
        self.url = url
        self.picture = picture
    }
}

struct ContentViewA: View {
    @State personal var knowledge = [
        Foo(title: "Image A", url: "https://www.shutterstock.com/image-illustration/two-shades-color-background-mix-260nw-2340299851.jpg", image: nil),
        Foo(title: "Image B", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Sydney_Harbour_Bridge_night.jpg/800px-Sydney_Harbour_Bridge_night.jpg", image: nil)

        // Foo(title: "Image B", url: "https://www.shutterstock.com/image-photo/ultra-wide-photo-mountains-river-260nw-1755037052.jpg", image: nil)
        /// There are more images in the array in real code.
    ]
    
    var physique: some View {
        ZStack {
            Coloration.black.opacity(0.7).ignoresSafeArea()
            VStack {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(alignment: .middle, spacing: 10) {
                        ForEach(Array(knowledge.enumerated()), id: .offset) { index, merchandise in
                            if let urlObject = URL(string: merchandise.url) {
                                AsyncImage(url: urlObject,
                                           scale: 1.0,
                                           transaction: Transaction(animation: .spring(response: 0.5, dampingFraction: 0.65, blendDuration: 0.025)),
                                           content material: { renderPhoto(section: $0, merchandise: merchandise, index: index) })
                            } else {
                                /// Word: Reveals placeholder view
                                EmptyView()
                            }
                        }
                    }
                    .padding(.main, 0)
                    .padding(.trailing, 16)
                    .body(maxWidth: .infinity, minHeight: 65, maxHeight: 65, alignment: .topLeading)
                }
            }
            .padding([.top, .bottom], 150.0)
            .padding([.leading, .trailing], 50.0)
        }
    }
    
    @ViewBuilder
    personal func renderPhoto(section: AsyncImagePhase, merchandise: Foo, index: Int) -> some View {
        swap section {
            case .success(let picture):
                thumbnailView(picture: picture, merchandise: merchandise, index: index)
            case .failure(let error):
                thumbnailView(merchandise: merchandise, index: index, isFailure: true)
            case .empty:
                thumbnailView(merchandise: merchandise, index: index, isFailure: true)
            @unknown default:
                EmptyView()
        }
    }
    
    personal func thumbnailView(picture: Picture? = nil, merchandise: Foo, index: Int, isFailure: Bool = false) -> some View {
        VStack {
            Rectangle()
            .foregroundColor(.clear)
            .body(width: 72, peak: 55)
            .background(
                VStack {
                    if let picture = picture {
                        picture.resizable()
                            .aspectRatio(contentMode: .fill)
                            // .aspectRatio(contentMode: .match) /// Setting facet ratio to suit avoids the issue, however would not give rounded rectangle look.
                            .body(width: 72, peak: 55)
                            .disabled(false)
                            .clipped()
                    } else {
                        /// present error picture
                        EmptyView()
                    }
                }
            )
            .cornerRadius(8)
            .padding([.top, .bottom], 10.0)
            .onTapGesture {
                print("%%%%% Tapped picture title: (merchandise.title) and index is: (index) %%%%%%")
            }
        }
    }
}

Sharing screenshots of the app utilizing pattern code:

Rounded rectangle pictures with aspectRatio(.fill), however tapping on crimson shade of 1st picture, opens 2nd picture, as a result of 2nd picture is huge. That is the look of the photographs I need to have.

Photographs with aspectRatio(.match), tapping on 1st picture, opens 1st picture and tapping on 2nd picture, opens 2nd picture. That is the faucet habits I need to have.

How can I’ve rounded rectangular wanting pictures and likewise open appropriate picture when tapped i.e. tapping wherever on Picture A ought to solely open Picture A?