Странная проблема, показывая изображение в округленном прямоугольнике ⇐ IOS

[Anonymous]

В моем приложении мне нужно показать изображения в округлой форме прямоугольника на горизонтальном просмотре прокрутки, и когда я нажимаю на изображение, изображение открывается на полноэкране. У меня есть несколько изображений, но для того, чтобы сохранить его простое, у меня есть 2 изображения в моем примере кода ниже. < /P>
Второе изображение (изображение B) очень широкое. Чтобы просто объяснить этот вопрос, я выбрал первое изображение (изображение A) с 2 оттенками (желтый и красный). Если вы нажимаете на красный цвет изображения A, приложение ведет себя так, как будто изображение B было нажато, и открывает изображение B вместо открытия изображения A. Нажатие на желтый цвет изображения A, открывает изображение правильно. < /P>
Это происходит потому, что изображение B широкое, и я использую image.resizeable (). Если я использую Image.Resizeable (). Aspectratio (**. Fit **) , то поведение нажимается хорошо, то есть, если красный цвет изображения A нажат, то приложение открывает саму изображение A, однако с помощью Aspectratio (. Подходит), изображения не отображаются в виде округленного прямоугольника. >

Код: Выделить всё

import SwiftUI

struct Foo {
var title: String
var url: String
var image: Image?

init(title: String, url: String, image: Image? = nil) {
self.title = title
self.url = url
self.image = image
}
}

struct ContentViewA: View {
@State private var data = [
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 body: some View {
ZStack {
Color.black.opacity(0.7).ignoresSafeArea()
VStack {
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .center, spacing: 10) {
ForEach(Array(data.enumerated()), id: \.offset) { index, item in
if let urlObject = URL(string: item.url) {
AsyncImage(url: urlObject,
scale: 1.0,
transaction: Transaction(animation: .spring(response: 0.5, dampingFraction: 0.65, blendDuration: 0.025)),
content: { renderPhoto(phase: $0, item: item, index: index) })
} else {
/// Note: Shows placeholder view
EmptyView()
}
}
}
.padding(.leading, 0)
.padding(.trailing, 16)
.frame(maxWidth: .infinity, minHeight: 65, maxHeight: 65, alignment: .topLeading)
}
}
.padding([.top, .bottom], 150.0)
.padding([.leading, .trailing], 50.0)
}
}

@ViewBuilder
private func renderPhoto(phase: AsyncImagePhase, item: Foo, index: Int) -> some View {
switch phase {
case .success(let image):
thumbnailView(image: image, item: item, index: index)
case .failure(let error):
thumbnailView(item: item, index: index, isFailure: true)
case .empty:
thumbnailView(item: item, index: index, isFailure: true)
@unknown default:
EmptyView()
}
}

private func thumbnailView(image: Image? = nil, item: Foo, index: Int, isFailure: Bool = false) -> some View {
VStack {
Rectangle()
.foregroundColor(.clear)
.frame(width: 72, height: 55)
.background(
VStack {
if let image = image {
image.resizable()
.aspectRatio(contentMode: .fill)
// .aspectRatio(contentMode: .fit) /// Setting aspect ratio to fit avoids the problem, but doesn't give rounded rectangle look.
.frame(width: 72, height: 55)
.disabled(false)
.clipped()
} else {
/// show error image
EmptyView()
}
}
)
.cornerRadius(8)
.padding([.top, .bottom], 10.0)
.onTapGesture {
print("%%%%% Tapped image title: \(item.title) and index is: \(index) %%%%%%")
}
}
}
}

экранинг -скриншоты приложения с использованием образца кода:
Закругленные прямоугольные изображения с Appectratio (.fill), но нажатие на красном цвете 1 -го изображения открывает 2 -е изображение, потому что 2 -е изображение широко. Это внешний вид изображений, которые я хочу иметь. /> < /p>
Изображения с Aspectratio (.fit), нажав на 1 -е изображение, открывает 1 -е изображение и постукивание на 2 -м изображении, открывает 2 -е изображение. Это поведение TAP, которое я хочу иметь.
Как я могу иметь закругленные прямоугольные изображения, а также открыть правильное изображение при нажатии, т.е.>

Подробнее здесь: https://stackoverflow.com/questions/794 ... -rectangle