SwiftUI 列表中基于约束的图像布局

Question

我想在SwiftUI List中实现以下基于约束的图像布局：

• 将每个Image的左/右边缘固定到列表边距（适应屏幕尺寸）
• 基于纵横比的动态高度（我也可以使用固定高度）
• 保持图像纵横比，内容应填满空间

我尝试过但不起作用的方法（基于这篇文章）：

struct MyView: View {
  @ObservedObject var viewModel: MyViewModel
  let aspectRatio = CGSize(width: 345, height: 120)

  var body: some View {
    List {
      ForEach(viewModel.items) { item in
        GeometryReader { geo in
          Image("test_image")
            .resizable()
            .aspectRatio(aspectRatio, contentMode: .fill)
            .frame(width: geo.size.width)
            .clipped()
        }
      }
    }
  }
}

我在 iPhone 11 Pro 上从geo获得的尺寸是 (343, 32)。 宽度是有道理的，但由于某种原因，它不会让单元格扩展超过 32 的高度。 欢迎任何提示，因为我真的开始怀念自动布局约束。

Answer 1

不需要使用GeometryReader这样的事情。 对于固定高度，您可以只提供一个仅具有height的frame 。 您也不需要创建自己的let aspectRatio = CGSize(width: 345, height: 120) - 如果您将其保留为 nil（默认情况下）应该没问题。

编辑：使用padding而不是带间距的VStack

struct MyView: View {
    var body: some View {
        List {
            ForEach(0..<10, id: \.self) { item in
                Image("test_image")
                    .resizable()
                    .aspectRatio(contentMode: .fill) /// no need for custom aspect ratio
                    .frame(height: 120) /// fixed height of image
                    .clipped() /// stop image from overflowing
                    .padding(.vertical, 12) /// extra vertical padding
            }
        }
    }
}

结果（带有"test_image" ）：

---

但是，它的高度固定为120 ，因此图像的顶部和底部都被裁剪掉了。 要解决此问题，您可以完全避免frame和clipped 。

struct MyView: View {
    var body: some View {
        List {
            ForEach(0..<10, id: \.self) { item in
                Image("test_image")
                    .resizable()
                    .aspectRatio(contentMode: .fill) /// doesn't matter if it's fit or fill
                    .padding(.vertical, 12) /// extra vertical padding
            }
        }
    }
}

结果：