ios 如何在LazyVGrid中为iPhone和iPad制作项目数量?

ryhaxcpt  于 2023-02-01  发布在  iOS
关注(0)|答案(3)|浏览(151)

我有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)
    }
}

mf98qq94

mf98qq941#

大概是这样的

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

pgpifvop2#

你可以把你的gridItemLayout设置为:

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

并在init (推荐).onAppear中添加:

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

uqxowvwt3#

虽然所提供的答案本身会起作用,但在iPad上以多任务模式使用应用时,它们可能会变得棘手:拆分视图或滑动。如果是滑动,iPad上应用的宽度将与iPhone上的宽度相同,但如果你检查一下界面习惯,你仍然会得到.pad(嗯,因为你正在使用iPad)。因此界面可能会损坏--你会在iPhone大小的应用上得到iPad界面。
但是有一种方法可以做到这一点-UserInterfaceSizeClass。具体来说,你需要一个水平大小类。这个枚举有两种情况(2023年2月的状态):简单地说,当应用程序的宽度与iPhone的宽度相似时(纵向模式下的滑动或狭缝视图,或者只是一个实际的iPhone),UserInterfaceSizeClass.compact;当宽度与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) {
            ...
        }
    }
}

相关问题