ios – SwiftUI – Bizarre concern whereas displaying a picture in rounded rectangle

In my app, I want 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 conserving it easy, I’ve 2 pictures in my pattern code beneath.

The second picture (Picture B) may be very broad. To elucidate this query in a straightforward method, I’ve chosen first picture (Picture A) with 2 shades (yellow and pink). In the event you faucet on pink 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 accurately.

That is taking place as a result of Picture B is broad and I’m utilizing picture.resizeable().aspectRatio(**.fill**) to show pictures in a rounded rectangle form. If I exploit picture.resizeable().aspectRatio(**.match**), then faucet habits works effective i.e. if pink shade of Picture A is tapped, then app opens Picture A itself, nonetheless with aspectRatio(.match), the pictures 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://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 {
            Colour.black.opacity(0.7).ignoresSafeArea()
            VStack {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(alignment: .heart, 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(part: $0, merchandise: merchandise, index: index) })
                            } else {
                                /// Be aware: Exhibits 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(part: AsyncImagePhase, merchandise: Foo, index: Int) -> some View {
        change part {
            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, top: 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, top: 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 pink shade of 1st picture, opens 2nd picture, as a result of 2nd picture is broad. That is the look of the pictures I wish to have.

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

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