ios - 在 SwiftUI 中调整滚动视图的内容

Question

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

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 屏幕上的图像

)

---

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

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

我怎样才能使用 SwiftUI 获得这个？

标签： iosswiftswiftuiuicollectionviewscrollview

Answer 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 得到它们的值，而不是像素。