LazyVGrid 中的 SwiftUI NavigationLink 選擇隨機索引

Question

每次選擇一行時，系統決定將隨機索引轉發到下一個視圖。

請查看以下視頻以進行澄清：

下面是代碼：

struct TestView: View {
    let columns = [
        GridItem(.flexible())
    ]
    @State var showDetail = false

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(1...10, id: \.self) { index in
                    Text("\(index)")
                        .background(NavigationLink(destination: TestDetail(index: index), isActive: $showDetail) {
                            EmptyView()
                        }).onTapGesture {
                            showDetail = true
                        }
                }
            }
        }
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

struct TestDetail: View {
    var index: Int
    var body: some View {
        Text("\(index)")
    }
}

Answer 1

您一次激活所有鏈接（因為所有鏈接都取決於一種狀態）。 相反，我們需要為這種情況使用不同的NavigationLink構造函數。

這里是固定變體。 使用 Xcode 12.1 / iOS 14.1 測試

struct TestView: View {
    let columns = [
        GridItem(.flexible())
    ]
    @State var selectedItem: Int?

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(1...10, id: \.self) { index in
                    Text("\(index)")
                        .background(NavigationLink(destination: TestDetail(index: index), tag: index, selection: $selectedItem) {
                            EmptyView()
                        }).onTapGesture {
                            selectedItem = index
                        }
                }
            }
        }
    }
}

Answer 2

您應該使用標准的 NavigationLink 功能，它會自動將其轉換為按鈕 - 您實際上並不需要 .background 和 .onTapGesture。

                ForEach(1...10, id: \.self) { index in
                    NavigationLink(
                        destination: TestDetail(index: index),
                        label: {
                            Text("\(index)")
                        })
                        .accentColor(.primary)
                }