Arrays SwiftUI watchOS如何在单个视图中将数组内容显示为子视图？

我正在用SwiftUI做一个Apple Watch应用程序。其思想是使用ContentView主体视图中的四个子视图在单个watch ContentView中显示不同的活动内容。我不想使用列表来显示活动内容，而是想在ContentView中显示多个自定义视图

我希望每个单独的子视图显示我模型中的唯一内容

我的模型名为

QuadActivity

，包含以下内容：

struct QuadActivity: Identifiable {

  let id = UUID()
  var activityImage: Image
  var activityTitle: String
}

我目前已经创建了一个

QuadActivity

的扩展，如下所示，以保存一些硬编码的测试数据：

extension QuadActivity {
  
  static func all() -> [QuadActivity] {
    
     return [
        QuadActivity(activityImage: activityImage1, activityTitle: "activity1"),
        QuadActivity(activityImage: activityImage2, activityTitle: "activity2"),
        QuadActivity(activityImage: activityImage3, activityTitle: "activity3"),
        QuadActivity(activityImage: activityImage4, activityTitle: "activity4")]
  }
}

我的

ContentView.swift

Body视图由一个嵌入2个hs图钉的VStack组成。每个HStack包含2个my子视图，其中包含杂项间隔符和填充修改器。每个子视图都应显示实例属性中一个数组元素的内容：

 var activityArrayEntry = QuadActivity.all()

因此，HStack 1应显示

activityImage1

和

activity1

和

activityImage2

和

activity2

。另一个HStack应显示项目3和4的数组元素

我不知道如何访问每个

activityArrayEntry

数组元素并在其中一个子视图中显示每个元素

我想我可以用一个：

ForEach(activityArrayEntry) { activity in
  VStack and embedded HStack code here}

并通过上面的ForEach循环显示子视图内容

但是，由于我的所有VStack和HStack以及子视图代码都在ForEach循环中，因此将为所有子视图显示相同的数组元素活动内容，因为该循环包含循环单次传递的所有视图信息。我希望每个子视图显示一个唯一数组元素的内容

如果我在ZStack和HStack代码中为每个HStack子视图显示部分移动ForEach，它将在数组条目中循环，但循环不会包含所有子视图代码，并且我不会让所有子视图仅显示1个数组元素中的活动数组内容

也许使用

ForEach

循环不是正确的方法。是否有其他方法从我的实例变量访问单个数组元素，以便每个唯一的数组元素仅在其中一个子视图中使用

同样，我如何获得整体

ContentView.swift

以显示ZStack和HStack结构中的四个子视图，以便每个子视图仅显示1个数组元素的活动内容

这是我迄今为止的

ContentView

。请注意，我最终将返回到一些注释行，以便使用来自我模型的@Published Observable Object的观察对象模型方法。这将最终（可能）取代我的模型中的函数all（），我现在使用硬编码数据来测试我的应用程序中的数据流。。。原来的问题就是这样

注意

调用

QuadView（）

只是调用提取的子视图，我在其中定义子视图的显示（简单的图像和文本）：

---

您可以将数据存储在视图模型中，而不是静态的

QuadActivity.all（）

：

class QuadViewVM: ObservableObject {
    @Published var quadActivities: [QuadActivity] = [
        QuadActivity(activityImage: activityImage1, activityTitle: "activity1"),
        QuadActivity(activityImage: activityImage2, activityTitle: "activity2"),
        QuadActivity(activityImage: activityImage3, activityTitle: "activity3"),
        QuadActivity(activityImage: activityImage4, activityTitle: "activity4"),
    ]
}

在

ContentView

中，可以使用两个

ForEach

循环创建网格（因为它是二维网格）：

---

非常感谢您的投入。我看到，通过使用嵌套的ForEach循环和行和列的paraders，您可以针对我想要做的特定数组。我将尝试这种方法，并向您汇报。我使用了这种方法，通过一些.padding（）操作，这是有效的。我还可以向前移动并添加导航链接，将我带到我的DetailView。非常感谢。现在，我希望苹果公司能在WWDC20上发布一种更简单的方式来制作网格/集合视图。@YZOOM01供参考，在SwiftUI 2中，您可以使用本机网格，请参阅

class QuadViewVM: ObservableObject {
    @Published var quadActivities: [QuadActivity] = [
        QuadActivity(activityImage: activityImage1, activityTitle: "activity1"),
        QuadActivity(activityImage: activityImage2, activityTitle: "activity2"),
        QuadActivity(activityImage: activityImage3, activityTitle: "activity3"),
        QuadActivity(activityImage: activityImage4, activityTitle: "activity4"),
    ]
}

struct ContentView: View {
    @ObservedObject var quadViewVM = QuadViewVM()
    let columnCount = 2
    var rowCount: Int {
        quadViewVM.quadActivities.count / columnCount
    }

    var body: some View {
        ZStack {
            // Horizontal divider
            VStack {
                Divider()
            }
            .edgesIgnoringSafeArea(.horizontal)
            // Vertical divider
            HStack {
                Divider()
            }
            .edgesIgnoringSafeArea(.vertical)

            activityGrid
        }
    }

    var activityGrid: some View {
        VStack {
            ForEach(0 ..< self.rowCount) { row in
                HStack {
                    ForEach(0 ..< self.columnCount) { column in
                        self.quadView(row: row, column: column)
                    }
                }
            }
        }
    }

    func quadView(row: Int, column: Int) -> some View {
        let activity = quadViewVM.quadActivities[row * columnCount + column]
        return QuadView(activity: activity)
            .frame(width: 85.0, height: 100.0)
            .buttonStyle(PlainButtonStyle())
    }
}

struct QuadView: View {
    let activity: QuadActivity

    var body: some View {
        ...
    }
}