在 SwiftUI 中调整滚动视图的内容答案

【问题标题】：Adapt content of a scrollView in SwiftUI在 SwiftUI 中调整滚动视图的内容
【发布时间】：2021-11-16 01:06:33
【问题描述】：

大家好，我正在关注这个关于 SwiftUI 的苹果教程。我已经到了 Apple 解释如何使用图像制作水平滚动视图的地步。

struct CategoryRow: View {
    var categoryName: String
    var items: [Landmark]

    var body: some View {
        VStack(alignment: .leading) {
            Text(categoryName)
                .font(.headline)
                .padding(.leading, 15)
                .padding(.top, 5)

            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 0) {
                    ForEach(items) { landmark in
                        CategoryItem(landmark: landmark)
                    }
                }
            }
            .frame(height: 185)
        }
    }
}

正如您从我发布的照片中看到的那样，您可以看到 2 张完整的图片，而一张没有。我希望您能够决定要显示多少张完整的图片（例如屏幕内的 4 张完整图片），并且它们适合所有设备

（例如 ..

iPhone 8 -> 屏幕上显示 4 个图像
iPhone 12 -> 屏幕上显示 4 个图像

)

简而言之，我需要知道如何调整 ScrollView 的内容以在不同的设备上显示，例如使用 UICollectionView 和我插入的 sizeForItemAtIndexPath 方法发生在 UIKit 中

.init (width: collectionView.frame.size.width / 4, height : collectionView.frame.size.height)

如何使用 SwiftUI 获得此功能？

【问题讨论】：

我不确定您到底要做什么，但是如果您想在滚动视图中显示数据同时限制行和列，则需要LazyGrid。这是CollectionView 中UIKit 的必然结果如果您不想要滚动视图，那么Federico Zantello 最近在他的[FiveStars.blog] 上的文章（fivestars.blog/articles/flexible-swiftui）可能会有所帮助。
@Yrb 我已经在尝试使用 LazyHGrid 但问题是我无法为每种类型的 iphone 设备（例如 iphone 8、iphone x、iphone pro max 等）分配一个适配值显示的元素，以便它们在不同尺寸的屏幕上也能以最佳方式显示
除了你可以通过使GridItem.flexible来使LazyHGrid适应屏幕大小。如果你想要一个四列布局，那么让所有GridItems .flecible 将根据他们需要的空间量来分隔它们，如果它们在标准.frame 中，它们都将占用相同数量的空间空间。你向我们展示了你不想要的东西，但不是你想要的东西。
@Yrb 是的，我需要让 LazyHGrid 的内容适应任何设备
你想让它滚动吗？这些物品是否需要均匀，或者它们可以是不同的尺寸吗？您是否只想一次只在视图中显示 4 张图像，而不需要滚动？所有这些都很容易做到。

标签： ios swift swiftui uicollectionview scrollview

【解决方案1】：

您可以使用几何阅读器来确定设备的大小，并根据具体情况调整图片的方向要使用 GeometryReader：

var body -> some View {
GeometryReader { proxy in
  if proxy.size.width > 324.0/2.0 { 
   // Your landmark view but with 4 pictures
    MyBigView()
  } else {
   // Your landmark view but with 3 pictures
    MySmallView()
  }
}
}

供参考，以下是手表分辨率：

40mm：394×324 44mm：448×368 38mm：340×272 42mm：390×312 除以 2.0 得到它们的值，而不是像素。

【讨论】：