swift - 将工具栏重构为另一个文件

Question

经验丰富的 Swift UIKit 编码人员，但绝对不会使用 SwiftUI。假设我有以下代码:

HStack {
    Button(
        action: { self.createNode() },
        label: {
            Text("ADD").bold().font(.system(size: 40)).frame(width: 200, height: 80).background(Color.yellow).cornerRadius(5)
    })
    Spacer()
    Button(
        action: { self.deleteNode() },
        label: {
            Text("DELETE").bold().font(.system(size: 40)).frame(width: 200, height: 80).background(Color.yellow).cornerRadius(5)
    })
}

一个非常简单的工具栏。但是现在，让我们再添加 (a) 四个 Buttons 并将其放入“根” View 中。在 UIKit 中我们称之为大型 View Controller 。

我试图将整个 HStack 移出 Root View ，但我在 action 方面遇到了问题。我知道我可以创建 ViewModifiers、自定义 View ，并且 - 至少在某种程度上 - 将一些东西移动到扩展中。但我无法将此扩展“锁定、库存和桶”移动到其他任何地方。我无法尝试将 createNode() 和 deleteNode() 移动到其他任何地方。

我确定是我在尝试将方钉 (UIKit) 装入圆孔 (SwiftUI)，但我没有 WWDC session 或其他资源我发现似乎在为我指明正确的方向。我错过了什么？

编辑:

这就是这两个操作 - 它们工作正常。

@State var nodes: [Node] = []

func createNode() {
    let newNodeName = nodes.count + 1
    let newNode = Node(name: newNodeName)
    nodes.append(newNode)
}
func deleteNode() {
    if nodes.count != 0 {
        nodes.remove(at: nodes.count - 1)
    }
}

我的问题不是关于 Swift 或维护数组的问题。它是关于 SwiftUI 的，以及如何将我当前的 140 行文件“重构”为更小的文件——在本例中是通过将“顶部栏”HStack 移除到 Xcode 中它自己的文件中。

这个水平堆叠的按钮最终将编号为 5(这是一个仅限 iPad 的应用程序)，我的问题是如何移动按钮“操作”，正确键入 () -> Void。

更多，这是整个文件的简化 View (请原谅使用 Markdown ，我找不到更好的方式来表示它):

HStack    
    VStack
       HStack  <-- Contains the Buttons that add/delete the nodes
       HStack
       HStack  <-- Contains the nodes themselves, will soon contain thumbnails    
    List

如果我的 HStack 由水平行的 Text View 组成，它可以正常工作。但是，当我尝试将 Button(无论是嵌套在 HStack 中还是独立的)移动到单独的文件中时，我遇到了构建问题。

Answer 1

我建议将操作和 @State 重构到 View 模型中。

final class ViewModel: BindableObject {

    let didChange = PassthroughSubject<Void, Never>()

    var nodes: [Node] = [] {
        didSet {
            didChange.send(())
        }
    }

    func createNode() {
        let newNodeName = nodes.count + 1
        let newNode = Node(name: newNodeName)
        nodes.append(newNode)
    }

    func deleteNode() {
        if nodes.count != 0 {
            nodes.remove(at: nodes.count - 1)
        }
    }

}

所有需要访问 Action 的 View ，都需要声明这个属性:

@EnvironmentObject var viewModel: ViewModel

关于@EnvironmentObject的更多信息here .

每当节点发生变化时，所有声明环境对象的 subview 都将被重绘。

你只需要在容器 View 中设置环境对象，它就会被传递给所有的 subview 。

例如

ContentView().environmentObject(ViewModel())

---

您的 View 层次结构:

HStack    
    VStack
       HStack  <- @EnvironmentObject (will call the actions)
       HStack
       HStack  <- @EnvironmentObject (will use viewModel.nodes to display nodes)
    List