如何將LazyVGrid單元格與TabView中的相應全屏影像連接起來（Xcode13，iOS15）

從相應的選項卡縮小時，我很難匹配正確的網格單元。

剛開始學習，我絕對應該再學習一些教程。如果您想在這里伸出援手，請提前致謝。

這是代碼：

楷模

struct Thumbnail: Identifiable {
    let id = UUID()
    var name: String
}

struct Wallpaper: Identifiable {
    var id = UUID()
    var name: String
}

let thumbnailSet = (1...50).map { Thumbnail(name: "iridisfera-thumbnail-\($0)") }
let wallpaperSet = (1...50).map { Wallpaper(name: "iridisfera-wallpaper-\($0)") }

圖庫（我洗掉了我的 selectedTab 實驗，因此您可以直接插入代碼）

struct GalleryView: View {
    @Namespace var namespace
    @State private var fullScreen: Int? = nil
    @State private var selectedTab = 0
    
    let columns = [GridItem(.flexible(), spacing: 2), GridItem(.flexible())]
    
    var body: some View {
        ZStack {
            // MARK: GRID VIEW
            ScrollView(showsIndicators: false) {
                LazyVGrid(columns: columns, spacing: 2) {
                    ForEach(thumbnailSet.indices) { index in
                        
                        let fullscreenIndex = fullScreen
                        if index == fullscreenIndex {
                            Color.clear
                        } else {
                            Image(thumbnailSet[index].name)
                                .resizable()
                                .aspectRatio(0.5, contentMode: .fit)
                                .matchedGeometryEffect(id: index, in: namespace)
                                .onTapGesture {
                                    withAnimation(.interpolatingSpring(mass: 0.2, stiffness: 34, damping: 4)) {fullScreen = index}
                                }
                        }
                    }
                }
            }
            .ignoresSafeArea()
            
            // MARK: FULL SCREEN VIEW
            if let fullscreenIndex = fullScreen {
                TabView(selection: $selectedTab) {
                    ForEach(wallpaperSet.indices) { index in
                        
                        Image(wallpaperSet[index].name)
                            .resizable()
                            .ignoresSafeArea()
                            .scaledToFill()
                    }
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                .matchedGeometryEffect(id: fullscreenIndex, in: namespace)
                .ignoresSafeArea()
                .zIndex(1)
                .onTapGesture {
                    withAnimation(.interpolatingSpring(mass: 0.1, stiffness: 28, damping: 4)) {fullScreen = nil}
                }
            }
        }
    }
}

uj5u.com熱心網友回復：

此代碼顯示了一般方法。TabView 必須位于單獨的結構中，因此可以使用已選擇的選項卡對其進行初始化。TabView 中的影像需要.tag()識別它們以供選擇。
它還不能完美地作業，因為您的影像無法識別，但它應該為您提供方向。單獨使用索引是不安全的，因此您應該將它們放在 Identifiable 結構中并通過 id 進行選擇。

struct GalleryView: View {
    
    @Namespace var namespace
    @State private var fullScreen: Int? = nil
    
    let columns = [GridItem(.flexible(), spacing: 2), GridItem(.flexible())]
    
    var body: some View {
        ZStack {
            // MARK: GRID VIEW
            ScrollView(showsIndicators: false) {
                LazyVGrid(columns: columns, spacing: 2) {
                    ForEach(thumbnailSet.indices) { index in
                        
                        if index == fullScreen {
                            Color.clear
                        } else {
                            Image(thumbnailSet[index].name)
                                .resizable()
                                .aspectRatio(1, contentMode: .fill)
                                .matchedGeometryEffect(id: index, in: namespace)
                                .onTapGesture {
                                    withAnimation {
                                        fullScreen = index
                                    }
                                }
                        }
                    }
                }
            }
            .ignoresSafeArea()
            
            // MARK: FULL SCREEN VIEW
            if fullScreen != nil {
                FullscreenTabView(selectedImage: $fullScreen, ns: namespace)
            }
        }
    }
}


struct FullscreenTabView: View {
    
    @Binding var selectedImage: Int?
    var ns: Namespace.ID
    
    init(selectedImage: Binding<Int?>, ns: Namespace.ID) {
        self._selectedImage = selectedImage
        self.ns = ns
        // initialize selctedTab to selectedImage
        self._selectedTab = State(initialValue: selectedImage.wrappedValue ?? 0)
    }
    
    @State private var selectedTab: Int
    
    var body: some View {
        TabView(selection: $selectedTab) {
            
            ForEach(wallpaperSet.indices) { index in
                
                Image(wallpaperSet[index].name)
                    .resizable()
                    .tag(index) // << the images in TabView need tags to identify
                    .ignoresSafeArea()

                    .matchedGeometryEffect(id: index == selectedTab ? selectedTab : 0,
                                           in: ns, isSource: true)
                                
                    .onTapGesture {
                        withAnimation {
                            selectedImage = nil
                        }
                    }
            }
        }
        .ignoresSafeArea()
        .tabViewStyle(.page(indexDisplayMode: .never) )
    }
}

標籤：代码 迅捷 swiftui-tabview 懒人网格

上一篇：有沒有辦法將深色主題更改為淺色主題，反之亦然，就像在swiftUI中以編程方式使用切換一樣？

下一篇：如何使UIActivityViewController基于動態陣列動態排除專案？