Swift/SwiftUI中包含多个视图类型的数组

Question

我想创建一个视图，人们可以在其中选择他们喜欢的背景图像，其中包括一个带有前景色的矩形或一个图像。到目前为止，我已经通过创建这个来实现这一点

结构：

struct BackgroundImage : Identifiable{
var background : AnyView
let id = UUID()
}

我正在将它们添加到一个类似的数组中

视图模型：

class VM : ObservableObject{
@Published var imageViews : Array<BackgroundImage> = Array<BackgroundImage>()

init(){
imageViews.append(BackgroundImage(background: AnyView(Rectangle().foregroundColor(Color.green))))
imageViews.append(BackgroundImage(background: AnyView(Rectangle().foregroundColor(Color.yellow))))
imageViews.append(BackgroundImage(background: AnyView(Image("Testimage"))))
}

这让我可以循环浏览一系列背景图像，比如

视图：

LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())]) {
ForEach(VM.imageViews, id: .self.id) { view in
ZStack{
view.background
//.resizable()
//.aspectRatio(contentMode: .fill)
.frame(width: g.size.width/2.25, height: g.size.height/8)                                                                                  
.clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
}
}
}

但是我无法添加

.resizable()
.aspectRatio(contentMode: .fill)

因为AnyView不允许这样做。

有没有更好的方法来实现这一点？我应该只使用两个单独的形状/图像数组吗？或者是否有更适合此情况的替代视图结构？

谢谢！

Answer 1

正如@DávidPásztor在评论中提到的那样，在ViewModel中存储视图是一种糟糕的设计。

实际上，您只需要存储一种颜色和一个图像名称。让视图构建代码构造实际视图。

以下是一种可能的实现方式。

struct BackgroundItem: Identifiable {
private let uicolor: UIColor?
private let imageName: String?
let id = UUID()

var isImage: Bool { imageName != nil }
var color: UIColor { uicolor ?? .white }
var name: String { imageName ?? "" }

init(name: String? = nil, color: UIColor? = nil) {
imageName = name
uicolor = color
}
}
class VM : ObservableObject{
@Published var imageItems: [BackgroundItem] = []

init() {
imageItems = [.init(color: .green),
.init(color: .blue),
.init(name: "TestImage")]
}
}
struct ContentView: View {
@ObservedObject var vm = VM()
var body: some View {
GeometryReader { g in
LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())]) {
ForEach(vm.imageItems) { item in
ZStack{
if item.isImage {
Image(item.name)
.resizable()
.aspectRatio(contentMode: .fill)
} else {
Color(item.color)
}
}
.frame(width: g.size.width/2.25, height: g.size.height/8)
.clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous)
}
}
}
}
}

注意：我曾想过使用enum来存储imageName和color之间的区别，但最简单的做法是只使用选项并存储我需要的选项。有了向视图构建代码公开的接口，您可以很容易地将实现更改为您希望存储信息的方式。