统一尺寸的图片滚动视图

Question

我正在使用 SwiftUI 构建集合视图的等价物。我已经能够得到我想要的布局，但是，我无法制作相同高度的所有图像（例如，假设 100 像素）。我怎样才能将图像的大小调整为 100 像素高 contentAspectFill（我不在乎图像是否被切断了一点），但仍然保持前导和尾随边界。

NewsList.swift

ScrollView {
    ForEach(newsArray, id:\.self) { article in
        Button(action: {
           //stuff here 
        }) {
           NewsCard(article: article)
        }
        .buttonStyle(PlainButtonStyle())
    }
    .padding(.horizontal)
}

NewsCard.swift

VStack(alignment: .leading) {
    WebImage(url: article.imageURL)
        .resizable()
        .indicator(.activity)
        .transition(.fade)
        .scaledToFill()
        .clipped()
        .cornerRadius(14.0, antialiased: true)
    Text(article.date.formatted)
        .font(.lightMedium)
    Text(article.title)
        .font(.regularLarge)
}
.padding(.top)

我在图像字段中使用 SDWebImageUI，但这应该无关紧要。正如您从我的屏幕截图中看到的那样，并非所有图像的高度都是统一的。

Answer 1

不确定我是否理解这里的问题，但请尝试以下操作

VStack(alignment: .leading) {
    WebImage(url: article.imageURL)
        .resizable()
        .frame(maxWidth: .infinity, maxHeight: _your_desired_height_here)  // << 
...

统一尺寸的图片滚动视图

Images ScrollView of Uniform Size

image

swiftui

scrollview

height

sdwebimage