如何在 SwiftUI 中更新单个子视图？答案

【问题标题】：How to update a single child view in SwiftUI?如何在 SwiftUI 中更新单个子视图？
【发布时间】：2019-10-23 16:27:02
【问题描述】：

我正在尝试在子视图和父视图之间建立 SwiftUI 连接。通过单击任何子视图，我只想重绘被点击的视图，而不是整个父视图。

当前的实现不允许您在单击视图时重绘视图，因为它具有派生值。

我尝试了不同的场景，将BindableObject 协议添加到CustomColor，但没有成功。

class CustomColor: Identifiable {

    let id = UUID()
    var color: Color

    init(color: Color) {
        self.color = color
    }

    func change(to color: Color) {
        self.color = color
    }

}

class ColorStore: BindableObject {

    var colors: [CustomColor] = [] {
        didSet {
            didChange.send(self)
        }
    }

    var didChange = PassthroughSubject<ColorStore, Never>()

    init() {
        self.colors = Array.init(repeating: CustomColor(color: .red), count: 10)
    }

}


struct ContentView: View {

    @EnvironmentObject var colorStore: ColorStore

    var body: some View {
        NavigationView {
            List {
                ForEach(colorStore.colors) { color in
                    ColorShape(color: color)
                }
            }.navigationBarTitle(Text("Colors"))
        }
    }

}

struct ColorShape: View {

    var color: CustomColor

    var body: some View {
        Button(action:
            { self.color.change(to: .blue) }
            , label: {
            ShapeView(shape: Circle(), style: color.color)
        })
    }

}

【问题讨论】：

请问为什么您不想重绘所有内容？为了性能？
实际上，我想了解它是否可能？我知道他们说你不必担心这些事情，但仍然。
附一张你的ui图片，让大家清楚了解
@jsbeginnerNodeJS，我将其附加到问题中。
这是不可能的。但是您可以为每一行创建状态。

标签： swiftui

【解决方案1】：

我想我找到了解决办法。第一个问题是我通过重复相同的元素而不是添加独立的元素来初始化颜色数组。

更重要的是CustomColor 本身应该具有BindableObject 一致性，而不是模型（我们不更改颜色数组，我们更改每种颜色）。最后，我们不需要将对象包装在 ForEach 元素中（这样会失去可重用性），而是将它们放在 List 元素中。

使用此实现，仅重绘已更改的视图，而不是整个集合。

代码如下：

class CustomColor: BindableObject, Identifiable {

    var didChange = PassthroughSubject<CustomColor, Never>()

    let id = UUID()
    var color: Color {
        didSet {
            self.didChange.send(self)
        }
    }

    init(color: Color) {
        self.color = color
    }

    func change(toColor color: Color) {
        self.color = color
    }

}

class ColorStore {

    var colors: [CustomColor] = []

    init() {
        (0...10).forEach { _ in colors.append(CustomColor(color: .red)) }
    }

}


struct ContentView: View {

    let colorStore: ColorStore

    var body: some View {
        NavigationView {
            List(colorStore.colors) { color in
                ColorShape(color: color)
            }.navigationBarTitle(Text("Colors"))
        }
    }

}

struct ColorShape: View {

    @ObjectBinding var color: CustomColor

    var body: some View {
        Button(action: { self.color.change(toColor: .blue) }, label: {
            ShapeView(shape: Circle(), style: color.color)
        })
    }

}

【讨论】：

【解决方案2】：

目前无法更新特定的子视图，我认为这是不可预期的。正如 Data flow Through Swift UI 会话中所说，一旦您更改了 @State 属性或 Bindable 对象 - 所有更改都通过视图层次结构向下流动，SwiftUI 框架正在比较所有视图并仅重新呈现已更改的内容。

【讨论】：

我添加了答案。似乎它按我的意愿工作。请看一下。
但在这种情况下，您将向颜色数组添加新项目，但 ContentView 不会更新
是的，不会更新。您必须将 BindableObject 一致性返回到 ColorStore 并在 NavigationBar 中放置一个带有操作的按钮。 Here is the link 我的要点。

【解决方案3】：

我可以提供三个不同的版本。所有这些都切换单个按钮并保持整个模型 - ColorStore var 同步。允许添加和删除颜色数组中的元素。另请注意，我们可以不使用 Identifiable 一致性来列出数组元素。

版本1.最接近问题：所有型号都是classes。

class CustomColor: ObservableObject, Identifiable {

    var didChange = PassthroughSubject<CustomColor, Never>()

    let id = UUID()
    var color: Color {
        didSet {
            objectWillChange.send()
        }
    }

    init(color: Color) {
        self.color = color
    }

    func change(to color: Color) {
        self.color = color
    }

}

class ColorStore: ObservableObject {

    var didChange = PassthroughSubject<ColorStore, Never>()

    var colors: [CustomColor] = [] {
        didSet {
            objectWillChange.send()
        }
    }

    init() {
        (0...10).forEach { _ in colors.append(CustomColor(color: .red)) }
    }

}


struct ContentView: View {

    @ObservedObject var colorStore: ColorStore = ColorStore()

    var body: some View {
        NavigationView {
            List(colorStore.colors) { c in
                    ColorShape(color: c)
            }
// will work without `Identifiable`
//            List(colorStore.colors.indices, id: \.self) { c in
//                    ColorShape(color: self.colorStore.colors[c])
//            }
            .navigationBarTitle(Text("Colors"))
            .navigationBarItems(leading:
                Button(action: { self.colorStore.colors.append(CustomColor(color: .green)) }) {
                    Text("Add")
                }, trailing:
                Button(action: {
                    self.colorStore.colors.removeLast()
                    print(self.colorStore.colors)
                }, label: { Text("Remove") }))
        }
    }

}

struct ColorShape: View {

    @ObservedObject var color: CustomColor

    var body: some View {
        Button(action:
            { self.color.change(to: .blue)
                print(self.color)
        }
            , label: {
                Circle().fill(color.color)
        })
    }

}

版本 2。CustomColor 被重写为结构。

// No need for manual `ObservableObject, Identifiable` conformance
struct CustomColor /*: Identifiable */ {

    // let id = UUID()
    var color: Color

    init(color: Color) {
        self.color = color
    }

    mutating func change(to color: Color) {
        self.color = color
    }

}

class ColorStore: ObservableObject {

    var didChange = PassthroughSubject<ColorStore, Never>()
    // If `CustomColor` is a `struct` i.e. value type, we can populate array with independent values, not with the same reference by using `repeating:` init.
    var colors: [CustomColor] = Array(repeating: CustomColor(color: .red), count: 10) {
        didSet {
            objectWillChange.send()
        }
    }

    /* init() {
        (0...10).forEach { _ in colors.append(CustomColor(color: .red)) }
    } */

}


struct ContentView: View {

    @ObservedObject var colorStore: ColorStore = ColorStore()

    var body: some View {
        NavigationView {
            List {
                // Strange, bu if we omit ForEach, we will get an error on element removal from array.
                ForEach(colorStore.colors.indices, id: \.self)
                { c in
                    ColorShape(color: self.$colorStore.colors[c])
                }

            }
            .navigationBarTitle(Text("Colors"))
            .navigationBarItems(leading:
                Button(action: { self.colorStore.colors.append(CustomColor(color: .green)) }) {
                    Text("Add")
                }, trailing:
                Button(action: {
                    self.colorStore.colors.removeLast()
                    print(self.colorStore.colors)
                }, label: { Text("Remove") }))
        }
    }

}

struct ColorShape: View {

    @Binding var color: CustomColor

    var body: some View {
        Button(action:
            { self.color.change(to: .blue)
                print(self.color)
        }
            , label: {
                Circle().fill(color.color)
        })
    }

}

版本 3. 主模型 ColorStore 及其子类型 CustomColor 被重写为结构。无需手动符合ObservableObject。

struct CustomColor /* : Identifiable */ {

    // let id = UUID()
    var color: Color

    init(color: Color) {
        self.color = color
    }

    mutating func change(to color: Color) {
        self.color = color
    }

}

struct ColorStore {
    // If `CustomColor` is a `struct` i.e. value type, we can populate array with independent values, not with the same reference by using `repeating:` init.
    var colors: [CustomColor] = Array(repeating: CustomColor(color: .red), count: 10)

}


struct ContentView: View {

    @State var colorStore: ColorStore = ColorStore()

    var body: some View {
        NavigationView {
            List{
                ForEach(colorStore.colors.indices, id: \.self) { i in
                    return ColorShape(color: self.$colorStore.colors[i])
                }
            }
            .navigationBarTitle(Text("Colors"))
            .navigationBarItems(leading:
                Button(action: { self.colorStore.colors.append(CustomColor(color: .green)) }) {
                    Text("Add")
            }, trailing:
                // Removing causes index out of bound error (bug?)
                Button(action: {
                    self.colorStore.colors.removeLast()
                    print(self.colorStore.colors)}) {
                    Text("Remove") })
        }
    }
}

struct ColorShape: View {

    @Binding var color: CustomColor

    var body: some View {
        Button(action: {
            self.color.change(to: .blue)
            print(self.color)
        }) {
            Circle().fill(color.color)
        }
    }
}

【讨论】：