SwiftUI中如何在LazyVGrid选中项所在行下方展示关联视图？

当然可以实现这个需求！虽然SwiftUI的LazyVGrid本身没有直接提供“管理行”的API，但我们可以通过一些小技巧来模拟这个效果，让选中项所在行的下方展开关联视图。

核心思路 #

LazyVGrid是基于网格项自动布局的，没法直接感知“行”的存在。所以我们可以换个思路：把数据源拆分成按行分组的二维数组，用VStack包裹每一行的HStack（模拟网格布局），这样就能在每一行后面灵活添加展开视图了——只要判断当前行包含选中的项，就把详情视图插进去。

完整实现代码 #

先定义模型和子视图，然后是主视图：

// 假设你的Book模型是这样的（根据实际情况调整）
struct Book: Identifiable, Hashable {
    let id = UUID()
    let title: String
}

// 你的BookElementView（示例实现）
struct BookElementView: View {
    let book: Book
    let width: CGFloat
    
    var body: some View {
        RoundedRectangle(cornerRadius: 8)
            .fill(Color.blue.opacity(0.2))
            .frame(width: width, height: width)
            .overlay(Text(book.title).foregroundColor(.black))
    }
}

// 展开详情视图（示例）
struct ExpandedDetailView: View {
    let book: Book
    
    var body: some View {
        RoundedRectangle(cornerRadius: 8)
            .fill(Color.orange.opacity(0.2))
            .frame(height: 150)
            .overlay(Text("《\(book.title)》的详情内容").font(.headline))
    }
}

// 主视图
struct ContentView: View {
    @State private var story: [Book] = (1...20).map { Book(title: "Book \($0)") }
    @State private var selectedBook: Book? = nil
    private let itemMinWidth: CGFloat = 100 // 和你原来的设置一致
    private let spacing: CGFloat = 10 // 和你原来的spacing一致
    
    var body: some View {
        GeometryReader { geo in
            ScrollView {
                VStack(spacing: spacing) {
                    // 动态计算列数，和LazyVGrid的.adaptive逻辑一致
                    let columnCount = max(1, Int(geo.size.width / (itemMinWidth + spacing)))
                    // 把数据源拆分成每行的数组
                    let rowGroups = splitIntoRows(items: story.sorted(), columns: columnCount)
                    
                    ForEach(rowGroups, id: \.self) { rowItems in
                        // 渲染当前行的所有网格项
                        HStack(spacing: spacing) {
                            ForEach(rowItems) { book in
                                BookElementView(book: book, width: itemMinWidth)
                                    .onTapGesture {
                                        // 点击切换选中状态（再次点击收起）
                                        selectedBook = (selectedBook == book) ? nil : book
                                    }
                            }
                            // 填充空白，保证每行对齐
                            if rowItems.count < columnCount {
                                Spacer(minLength: 0)
                            }
                        }
                        
                        // 如果当前行包含选中的书籍，展示详情视图
                        if let selected = selectedBook, rowItems.contains(selected) {
                            ExpandedDetailView(book: selected)
                                .transition(.move(edge: .bottom).combined(with: .opacity))
                        }
                    }
                }
                .padding(spacing)
            }
        }
    }
    
    // 辅助方法：将一维数组拆分成每行n个元素的二维数组
    private func splitIntoRows<T: Identifiable>(items: [T], columns: Int) -> [[T]] {
        guard columns > 0 else { return [items] }
        var rows: [[T]] = []
        var currentRow: [T] = []
        
        for item in items {
            currentRow.append(item)
            if currentRow.count == columns {
                rows.append(currentRow)
                currentRow = []
            }
        }
        
        if !currentRow.isEmpty {
            rows.append(currentRow)
        }
        
        return rows
    }
}

关键细节说明 #

1. 动态列数计算：用GeometryReader获取容器宽度，计算出和LazyVGrid(.adaptive(minimum: width))一致的列数，保证布局效果和原来一致。
2. 行分组处理：通过splitIntoRows方法把数据源拆成每行的数组，这样我们就能精准控制每一行的内容和后续的展开视图。
3. 选中状态切换：点击网格项时切换选中状态，再次点击可以收起详情视图。
4. 过渡动画：给详情视图添加过渡动画，让展开/收起的过程更流畅自然。

关于LazyVGrid的替代方案 #

如果你一定要用LazyVGrid，也可以实现，但逻辑会更复杂：需要计算选中项的位置，然后在网格的数据源中插入一个跨所有列的GridItem来展示详情。不过上面的方案更直观，也更容易维护，效果和LazyVGrid几乎一致。

内容来源于stack exchange