使用ForEach SwiftUI循环两个不同类型项目(字符串和图像)的数组

Question

为了在文本数组下有一个图像数组，我希望有一个与图像或文本交替的数组，这取决于我是按下按钮文本还是按钮图片。

以下是我尝试过的：

struct HistoryPicture: Identifiable {let id = UUID ()
var picture: Image?}
struct HistoryText: Identifiable {let id = UUID ()
var text: String?}
struct ContentView: View {
@State var archivePicture: [HistoryPicture] = []
@State var archiveText: [HistoryText] = []
var body: some View {ScrollView{
VStack(spacing:20){

ForEach(self.archiveText) { item in
Text("<text>")
}
ForEach(self.archivePicture) { item in
Image("simpson")
}
// Button Text
HStack{
Button {var newHistory = HistoryText()
newHistory.text = "<text>"
self.archiveText.append(newHistory)
} label: { Circle()
.fill(Color.black)
.frame(width: 70, height: 70)} }
// Button Picture
HStack{
Button {var newHistoryPicture = HistoryPicture()
newHistoryPicture.picture =     Image("simpson")
self.archivePicture.append(newHistoryPicture)
} label: { Circle()
.fill(Color.red)
.frame(width: 70, height: 70)
}} }} }}

Answer 1

使用此解决方案，您可以按按钮的顺序获得结果。为此，您只需要一个带有一个结构的ForEach。如果您想在ForEach中获得更复杂的视图，我建议使用Protocols或继承。

struct HistoryItem: Identifiable {
let id = UUID()
var text: String?
var imageName: String?
}
struct ContentView: View {
@State var items = [HistoryItem]()

var body: some View {
ScrollView {
VStack(spacing: 20){
ForEach(items) { item in
if let text = item.text {
Text(text)
} else if let imageName = item.imageName {
Image(imageName)
}
}

HStack {
Button {
let newItem = HistoryItem(text: "<text>")
items.append(newItem)
} label: {
Circle()
.fill(Color.black)
.frame(width: 70, height: 70)
}

Button {
let newItem = HistoryItem(imageName: "simpson")
items.append(newItem)
} label: {
Circle()
.fill(Color.red)
.frame(width: 70, height: 70)
}
}
}
}
}
}