arrays - 使用 ForEach SwiftUI 循环多个数组

Question

用户界面:https://imgur.com/a/0BbJBFc

我正在使用 ForEach 迭代示例代码中的矿物数组，但我找不到合适的解决方案来循环矿物正下方的第二个数组(矿物量) .

在不同的项目中，到目前为止，我已经做到了 ForEach 循环两个数组，但是对于每种矿物，都显示了 Planet 的所有数量，而对于第二种矿物，显示了所有数量星球等等。

我确实创建了一个包含两个数组的新结构，但没有成功。添加绑定(bind)属性也失败。我希望学习一种新的swift方法来实现想要的样子。

数据文件

import Foundation

struct Planet: Identifiable {
    var id = UUID()
    var name: String
    var minerals: [String]
    var mineralAmount: [String]
}

let planetsData: [Planet] = [

Planet(name: "Jupiter", minerals: ["Iron", "Gold", "Copper"], mineralAmount: ["10K", "20K", "30K"]),
Planet(name: "Earth", minerals: ["Lithium", "Aluminium", "Quartz"], mineralAmount: ["40K", "50K", "60K"])
]

内容 View

import SwiftUI

struct ContentView: View {
    
    var planet: Planet
    var body: some View {
    
      VStack() {
        ForEach(planet.minerals, id: \.self) { item in
            Text(item)
                .font(.system(size: 22, weight: .regular))
                        .foregroundColor(.primary)

                        Text("amount to be added")
                            .font(.system(size: 22, weight: .regular))
                            .foregroundColor(.primary)

                    }
                }
            }
        }
    

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
            ContentView(planet: planetsData[0])
        }
    }


  [1]: /image/4MDKs.png

Answer 1

你可以这样实现:

ScrollView {
    VStack (alignment: .leading) {
        ForEach(0..<planet.minerals.count) { i in
            HStack {
                Circle()
                    .frame(width: 50, height: 50)
                    .foregroundColor(.black)
                    
                VStack (alignment: .leading) {
                    Text(planet.minerals[i])
                        .font(.system(size: 22, weight: .regular))
                        .foregroundColor(.primary)
                    Text(planet.mineralAmount[i])
                        .font(.system(size: 22, weight: .regular))
                        .foregroundColor(.secondary)
                }
            }
            
        }
        Spacer()
    }
}