如何在 LazyVGrid 中为 iPhone 和 iPad 创建项目数？答案

【问题标题】：How to make number of items for iPhone and iPad in LazyVGrid?如何在 LazyVGrid 中为 iPhone 和 iPad 创建项目数？
【发布时间】：2023-01-31 04:32:07
【问题描述】：

我有 LazyVGrid，其中我想为 iPhone 每行制作 2 个项目，在 iPad 中每行 4 个项目，我不确定我应该如何在 SwiftUI 中给出条件以及如何限制行数

//
//  ContentView.swift
//  DemoProject


import SwiftUI
import CoreData

struct ContentView: View {
    @Environment(\.managedObjectContext) private var viewContext

    @FetchRequest(
        sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)],
        animation: .default)
    private var items: FetchedResults<Item>
    private var gridItemLayout = [GridItem(.adaptive(minimum: 100))]

    @StateObject private var viewModel = HomeViewModel()

    var body: some View {
        GeometryReader { geometry in
            NavigationView {
                ScrollView {
                    LazyVGrid(columns: gridItemLayout, spacing: 20) {
                        ForEach(viewModel.results, id: \.self) {
                            let viewModel = ResultVM(model: $0)

                            NavigationLink(destination: {
                                DetailView()
                            }, label: {
                                SearchResultRow(resultVM: viewModel)

                            })
                        }
                    }
                }
            }
            .onAppear(perform: {
                viewModel.performSearch()
            })
        }
    }
}

struct SearchResultRow: View {

    let resultVM: ResultVM

    var body: some View {
        HStack {
            RoundedRectangle(cornerRadius: 16).fill(.yellow)
                .frame(maxWidth: .infinity).aspectRatio(1, contentMode: .fit)
                .overlay(Text(resultVM.trackName))
                .onTapGesture {
                }

        }.padding()
            .background(Color.red)
    }
}

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

像这样：

LazyVGrid(columns: Array(repeating: .init(.flexible()),
                        count: UIDevice.current.userInterfaceIdiom == .pad ? 4 : 2)) {
        ForEach(categories, id: .name) { category in
                    
        }
}

【讨论】：

【解决方案2】：

那么你可以将你的gridItemLayout设为以下内容：

private var gridItemLayout = [
    GridItem(spacing: 2),//your spacing
    GridItem(spacing: 2),//your spacing
]

并添加一个初始化（推荐的）或者.onAppear：

if UI_USER_INTERFACE_IDIOM() == .pad {
    gridItemLayout.append(contentsOf: [GridItem(spacing: 2), GridItem(spacing: 2)]) //your spacing
}

【讨论】：

【解决方案3】：

虽然提供的答案本身有效，但在 iPad 上以多任务模式使用您的应用程序时，它们可能会变得棘手：Split View 或 Slide Over。如果使用 Slide Over，你的应用程序在 iPad 上的宽度将与在 iPhone 上相同，但如果你检查界面习惯用法，你仍然会得到 .pad（好吧，因为你是使用 iPad）。因此，界面可能会损坏——您将在 iPhone 大小的应用程序上获得 iPad 界面。

但有一种方法可以正确地做到这一点——UserInterfaceSizeClass。具体来说，您需要一个水平尺寸等级。该枚举有 2 个案例（2023 年 2 月的状态）：.compact 和 .regular。简单来说，UserInterfaceSizeClass 是 .compact 当应用程序的宽度与 iPhone 的宽度相似时（纵向模式下的滑过或狭缝视图或只是一个实际的 iPhone）和 .regular 当宽度与 iPad 的相似时宽度（普通 iPad 纵向或横向模式，横向模式下的拆分视图）。基于此参数，您可以决定如何呈现您的界面

所以，足够的理论，这里是复制粘贴的代码:)

struct YourView: View {
    @Environment(.horizontalSizeClass)
    var horizontalSizeClass

    var columns: [GridItem] {
        switch horizontalSizeClass {
        case .compact:
            return [GridItem(), GridItem()] // Using 2 columns if it's narrow
        case .regular:
            return [GridItem(), GridItem(), GridItem(), GridItem()] // Using 4 columns if it's wide
        // Cover `nil` and `@unknown default` here
        }
    }

    var body: some View {
        LazyVGrid(columns: columns) {
            ...
        }
    }
}

【讨论】：