SwiftUI，为什么视图的一部分没有刷新？@State变量未更新

Question

这是我在SwiftUI代码中遇到的问题再现。假设有一个设备列表，每个设备都有一些连接信息（启用或禁用）。

在SwiftUI中使用经典的List视图，对于每个设备将显示一个DeviceView视图。为了方便起见，我想在顶部添加几个箭头，以便在不需要每次返回列表的情况下切换设备（类似于iOS中的Mail应用程序）。因此，在从列表中调用DeviceView之前，我先调用MotherDeviceView来存储当前设备的信息。当我点击顶部的箭头时，MotherDeviceView再次调用DeviceView并更新视图。

struct Device: Identifiable {
    var id = Int()
    var deviceName = String()

    var isWifiOn = Bool()
    var isCellularOn = Bool()
    var isBluetoothOn = Bool()
}

let devices: [Device] = [
    Device(id: 0, deviceName: "iPhone", isWifiOn: true, isCellularOn: false, isBluetoothOn: true),
    Device(id: 1, deviceName: "iPod", isWifiOn: false, isCellularOn: false, isBluetoothOn: true),
    Device(id: 2, deviceName: "iPad", isWifiOn: false, isCellularOn: true, isBluetoothOn: false)
]

// main view, with list of devices
struct DeviceTab: View {
    var body: some View {
        NavigationView {
            List(devices) { device in
                NavigationLink(destination: MotherDeviceView(device: device)){
                    Text(device.deviceName)
                }
            }.navigationBarTitle(Text("Devices"))
        }
    }
}

// the list call this view and pass the device to DeviceView.
// Using this view is possible to go to the other device using the arrows on the top
// without returning to the list
struct MotherDeviceView: View {
    @State var device: Device

    var body: some View {
        VStack{
            DeviceView(device: $device)
        }
        .navigationBarItems(trailing: arrows)
    }

    private var arrows: some View {
        HStack{
            Button(action: { self.previous() },
                    label: { Image(systemName: "chevron.up") } )
                .padding(.horizontal, 10)
            Button(action: { self.next() },
                   label: { Image(systemName: "chevron.down") } )
        }
    }

    func previous() {
        if device.id == 0 { return }
        device = devices[device.id - 1]
    }

    func next() {
        if device.id == 2 { return }
        device = devices[device.id + 1]
    }

}

// DeviceView
struct DeviceView: View {
    @Binding var device: Device

    var body: some View {
        VStack{
            Spacer()
            Text("This is the device number: " + String(device.id))
            Spacer()
            ToggleSection(dev: $device)
            Spacer()
        }.navigationBarTitle(device.deviceName)
    }
}

// Toggle part of DeviceView
struct ToggleSection: View {
    @Binding var dev: Device

    @State var toggleOn: [Bool] = [false, false, false]

    var body: some View {

        VStack{

            Text(dev.deviceName)
                .fontWeight(.bold)

            Toggle(isOn: $toggleOn[0], label: { Text("Wifi") } )
                .padding()

            Toggle(isOn: $toggleOn[1], label: { Text("Cellular") } )
                .padding()

            Toggle(isOn: $toggleOn[2], label: { Text("Bluetooth") } )
                .padding()

        }
        .onAppear{ self.initialConfigToggle() }
        // with onAppear is okay, but when I use the top arrows, this section does not update
    }

    private func initialConfigToggle() {
        self.toggleOn[0] = self.dev.isWifiOn
        self.toggleOn[1] = self.dev.isCellularOn
        self.toggleOn[2] = self.dev.isBluetoothOn
    }

}

但是在DeviceView中有一个名为ToggleSection的部分无法更新，我不知道该如何解决。 也许强制更新？但我认为这不是正确的答案（而且我甚至不知道如何强制更新）。

我认为，如果在ToggleSection中使用@Binding而不是@State可能是正确的答案，但是这并没有起作用。 这个示例会生效（除了切换按钮没有更新）。

提前感谢！

- Antonio Cassia

Answer 1

这里可能的方法是添加显式视图模型来处理设备存储，并以一种将所有视图连接起来的方式进行修改，从而确切地修改该存储（避免复制设备值）。

已通过 Xcode 11.4 / iOS 13.4 进行测试。

修改后的代码:

import SwiftUI
import Combine

struct Device: Identifiable {
    var id = Int()
    var deviceName = String()

    var isWifiOn = Bool()
    var isCellularOn = Bool()
    var isBluetoothOn = Bool()
}

class DeviceStorage: ObservableObject {
    @Published var devices: [Device] = [
        Device(id: 0, deviceName: "iPhone", isWifiOn: true, isCellularOn: false, isBluetoothOn: true),
        Device(id: 1, deviceName: "iPod", isWifiOn: false, isCellularOn: false, isBluetoothOn: true),
        Device(id: 2, deviceName: "iPad", isWifiOn: false, isCellularOn: true, isBluetoothOn: false)
    ]
}

// main view, with list of devices
struct DeviceTab: View {
    @ObservedObject var vm = DeviceStorage() // for demo, can be injected via init
    var body: some View {
        NavigationView {
            List(Array(vm.devices.enumerated()), id: \.element.id) { i, device in
                    NavigationLink(destination: MotherDeviceView(vm: self.vm, selectedDevice: i)) {
                        Text(device.deviceName)
                }
            }.navigationBarTitle(Text("Devices"))
        }
    }
}

struct MotherDeviceView: View {
    @ObservedObject var vm: DeviceStorage // reference type, so have same
    @State private var selected: Int      // selection index

    init(vm: DeviceStorage, selectedDevice: Int) {
        self.vm = vm
        self._selected = State<Int>(initialValue: selectedDevice)
    }

    var body: some View {
        VStack{
            DeviceView(device: $vm.devices[selected]) // bind to selected
        }
        .navigationBarItems(trailing: arrows)
    }

    private var arrows: some View {
        HStack{
            Button(action: { self.previous() },
                    label: { Image(systemName: "chevron.up") } )
                .padding(.horizontal, 10)
            Button(action: { self.next() },
                   label: { Image(systemName: "chevron.down") } )
        }
    }

    func previous() {
        if vm.devices[selected].id == 0 { return }
        selected -= 1                              // change selection
    }

    func next() {
        if vm.devices[selected].id == 2 { return }
        selected += 1                              // change selection
    }

}

// DeviceView
struct DeviceView: View {
    @Binding var device: Device

    var body: some View {
        VStack{
            Spacer()
            Text("This is the device number: " + String(device.id))
            Spacer()
            ToggleSection(dev: $device)
            Spacer()
        }.navigationBarTitle(device.deviceName)
    }
}

// Toggle part of DeviceView
struct ToggleSection: View {
    @Binding var dev: Device

    var body: some View {

        VStack{

            Text(dev.deviceName)
                .fontWeight(.bold)

            // all below bound directly to model !!!

            Toggle(isOn: $dev.isWifiOn, label: { Text("Wifi") } )
                .padding()

            Toggle(isOn: $dev.isCellularOn, label: { Text("Cellular") } )
                .padding()

            Toggle(isOn: $dev.isBluetoothOn, label: { Text("Bluetooth") } )
                .padding()

        }
    }
}

- Asperi

---

这是一个很好的想法！但在ToggleSection中，我需要计算Toggle的“isOn”状态。在这里我没有报告这个问题，但实际上在ToggleSection中还有另一个@State var toggleDisabled：[Bool]，它计算是否可以启用或禁用切换（用户无法与之交互）。使用这种方法，无法将计算绑定传递给Toggle。 - Antonio Cassia

好的，我解决了，使用（例如使用简单的计算值）Toggle(isOn: Binding( get: { return !self.dev.isCellularOn}, set: { (newvalue) in }), label: {Text("Cellular")} )。谢谢你的回答！ - Antonio Cassia