Array che include più tipi di visualizzazione in Swift / SwiftUI
Voglio creare una vista in cui le persone possono scegliere la loro immagine di sfondo preferita, queste includono un rettangolo con un colore di primo piano o un'immagine. Finora ho funzionato creando questo
Struct:
struct BackgroundImage : Identifiable{
var background : AnyView
let id = UUID()
}
Li sto aggiungendo a un array in questo modo
ViewModel:
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"))))
}
che mi consente di scorrere un array di BackgroundImages in questo modo
Visualizza:
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))
}
}
}
Tuttavia non sono in grado di aggiungere
.resizable()
.aspectRatio(contentMode: .fill)
per le immagini poiché AnyView non lo consente.
C'è un modo migliore per raggiungere questo obiettivo? Dovrei invece avere solo due array separati per forme / immagini? O esiste una struttura di visualizzazione alternativa che sarebbe più adatta a questo?
Grazie!
Risposte
Come @ DávidPásztor ha menzionato nei commenti, memorizzare le viste nel tuo ViewModel è un cattivo design.
Hai solo bisogno di memorizzare un colore e un nome di immagine. Consenti al codice di costruzione della vista di costruire le viste effettive.
Ecco una possibile implementazione.
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)
}
}
}
}
}
Nota: ho pensato di usare un enum
per memorizzare la distinzione tra imageName e color, ma era più semplice usare solo gli optional e memorizzare quello di cui avevo bisogno. Con l'interfaccia che viene esposta al codice di costruzione della vista, è possibile modificare facilmente l'implementazione nel modo in cui si desidera memorizzare le informazioni.