Несколько презентаций .sheet(): интеграция быстрого закрытия/представления

Я пытаюсь создать представление, похожее на то, что мы видим на главном экране приложения Netflix для iOS, с несколькими рядами ячеек.

Вот структура моих взглядов:

• CollectionView(): отображает отдельные элементы (в виде прямоугольника).
• ListOfCollections(): отображает горизонтальную прокрутку элементов CollectionView.
• MainView(): использует несколько экземпляров ListOfCollections() для создания нескольких строк.
• CollectionDetailsView(): подробное представление соответствующей коллекции.
• Каждая ячейка может представлять подробное представление в виде листа с помощью .sheet(isPresented:Content:).

Проблема, с которой я столкнулся, связана с презентациями листов. Если в главном представлении я быстро покажу подробное представление элемента 1, коснувшись прямоугольника «Коллекция 1», закрою его, перетащив вниз, а затем сразу попытаюсь отобразить подробное представление элемента 2, нажав на «Коллекцию 2», Подробный вид Коллекции 2 не отображается. Если я продолжу нажимать на разные элементы в разных коллекциях, в какой-то момент появится одно из подробных представлений. После его закрытия все ранее предпринятые попытки просмотра подробностей начинают появляться один за другим, сразу после каждого закрытия.

Такое поведение иногда происходит, даже если я не нажимаю быстро.

Для отладки я пересобрал более простую версию и попытался воспроизвести проблему, вот код:

Структура элемента

struct CollectionModel: Identifiable {
    let id: UUID = UUID()
    let randomNumb: Int = Int.random(in: 1...10)
    
    static var mockArray: [CollectionModel] {
        [
            CollectionModel(),
            CollectionModel(),
            CollectionModel(),
            CollectionModel(),
            CollectionModel(),
            CollectionModel(),
            CollectionModel(),
            CollectionModel(),
            CollectionModel(),
            CollectionModel()
        ]
    }
}

МейнВью()

struct ContentView: View {

    var body: some View {
        
        ScrollView(.vertical, showsIndicators: false) {
            LazyVStack {
                ListView()
                ListView()
                ListView()
                ListView()
            }
        }.padding(.horizontal, 2)
    }
}

Посмотреть список()

struct ListView: View {
    
    var listOfCollectionModel: [CollectionModel] = CollectionModel.mockArray
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack{
                ForEach(listOfCollectionModel) { model in
                    CollectionView(collectionModel: model)
                }
            }.padding(.horizontal)
        }
    }
    
}

КоллекцияView()

struct CollectionView: View {
    
    @State var collectionModel: CollectionModel
    @State var showDetails: Bool = false
    
    var body: some View {
        Text("\(collectionModel.randomNumb)")
            .padding()
            .frame(width: 200, height: 250)
            .background(.red.gradient)
            .clipShape(RoundedRectangle(cornerRadius: 15))
            .font(.title)
            .bold()
            .foregroundStyle(.white)
            .onTapGesture {
                showDetails = true
            }
            .sheet(isPresented: $showDetails){
                ZStack{
                    Color.red
                        .ignoresSafeArea()
                    Text("\(collectionModel.randomNumb)")
                }
            }
    }
    
}

После просмотра некоторого руководства по .sheet() выяснилось, что, возможно, лучше использовать .sheet(item). Итак, я попробовал это следующим образом:

Посмотреть список()

struct ListView: View {
    
    var listOfCollectionModel: [CollectionModel] = CollectionModel.mockArray
    @State var selectedModel: CollectionModel? = nil
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack{
                ForEach(listOfCollectionModel) { model in
                    CollectionView(collectionModel: model)
                        .onTapGesture {
                            selectedModel = model
                        }
                }
            }.padding(.horizontal)
                .sheet(item: $selectedModel) { model in
                    ZStack {
                        Color.black
                            .ignoresSafeArea()
                        Text("\(model.randomNumb)")
                            .font(.title)
                            .bold()
                            .foregroundStyle(.white)
                    }
                }
        }
    }
    
}

КоллекцияView()

struct CollectionView: View {
    
    @State var collectionModel: CollectionModel
    
    var body: some View {
        Text("\(collectionModel.randomNumb)")
            .padding()
            .frame(width: 200, height: 250)
            .background(.red.gradient)
            .clipShape(RoundedRectangle(cornerRadius: 15))
            .font(.title)
            .bold()
            .foregroundStyle(.white)
    }
    
}

Теперь лист представлен хорошо, но иногда содержимое может совпадать с ранее выбранным содержимым. Чтобы избежать этой проблемы, я использовал .id(sheetID) следующим образом:

Посмотреть список()

struct ListView: View {
    
    var listOfCollectionModel: [CollectionModel] = CollectionModel.mockArray
    @State var selectedModel: CollectionModel? = nil
    @State var sheetID: UUID = UUID()
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack{
                ForEach(listOfCollectionModel) { model in
                    CollectionView(collectionModel: model)
                        .onTapGesture {
                            selectedModel = model
                            sheetID = UUID()
                        }
                }
            }.padding(.horizontal)
                .sheet(item: $selectedModel) { model in
                    ZStack {
                        Color.black
                            .ignoresSafeArea()
                        Text("\(model.randomNumb)")
                            .font(.title)
                            .bold()
                            .foregroundStyle(.white)
                    }.id(sheetID)
                }
        }
    }
    
}

Теперь мне кажется, что это работает, но я не знаю... Мне действительно кажется, что я сделал что-то неправильно вначале, и теперь я понемногу исправляю свою первоначальную ошибку (которую я не знаю, в чем она заключается). немного, добавляя слои ненужных исправлений.

Ребята, у вас есть какие-нибудь мысли по этому поводу? Спасибо за вашу помощь.

Ответ от @Benzy Neez работает хорошо.