Каков правильный метод передачи данных в закрытие ViewBuilder в SwiftUI?

Question

Я играю с универсальными шаблонами в SwiftUI и столкнулся с проблемой сохранения данных при попытке использовать закрытие ViewBuilder для передачи данных в общий View. Моя цель - иметь представление оболочки, которое управляет получением данных от API и передачей их в общее представление, как определено в блоке ViewBuilder. Кажется, что все данные успешно переданы в инициалы, в том числе в мой общийBasicListView, однако когда body вызывается, ни один из данных списка не сохраняется.

Думаю, проще будет объяснить проблему с помощью кода. Приносим извинения за длинный дамп кода:

import SwiftUI
import Combine

// This is the blank "shell" View that manages passing the data into the viewBuilder through the @ViewBuilder block

struct BlankView<ListItem, Content:View>: View where ListItem: Listable {
    
    let api = GlobalAPI.shared
    
    @State var list: [ListItem] = []
    
    @State var viewBuilder: ([ListItem]) -> Content // Passing in generic [ListItem] here
    
    init(@ViewBuilder builder: @escaping ([ListItem]) -> Content) {
        self._viewBuilder = State<([ListItem]) -> Content>(initialValue: builder)
    }
    
    var body: some View {
        
        viewBuilder(list) // List contained in Blank View passed into viewBuilder Block here
            .multilineTextAlignment(.center)
            .onReceive(GlobalAPI.shared.listDidChange) { item in
                if let newItem = item as? ListItem {
                    self.list.append(newItem) // Handle API updates here
                }
            }
    }
}

// And Here is the implementation of the Blank View
struct TestView: View {

    public var body: some View {
        BlankView<MockListItem, VStack>() { items in // A list of items will get passed into the block
            VStack {
                Text("Add a row") // Button to add row via API singleton
                    .onTapGesture {
                        GlobalAPI.shared.addListItem()
                    }
                
                BasicListView(items: items) { // List view init'd with items
                    Text("Hold on to your butts") // Destination
                }
            }
        }
    }
}


// Supporting code

// The generic list view/cell

struct BasicListView<Content: View, ListItem:Listable>: View {
    
    @State var items: [ListItem]
    
    var destination: () -> Content
    
    init(items: [ListItem], @ViewBuilder builder: @escaping () -> Content) {
        self._items = State<[ListItem]>(initialValue: items) // Items successfully init'd here
        self.destination = builder
    }
    
    var body: some View {
        List(items) { item in // Items that were passed into init no longer present here, this runs on a blank [ListItem] array
            BasicListCell(item: item, destination: self.destination)
        }
    }
}

struct BasicListCell<Content: View, ListItem:Listable>: View {
    
    @State var item: ListItem
    
    var destination: () -> Content
    
    var body: some View {
        
        NavigationLink(destination: destination()) {
            HStack {
                item.photo
                    .resizable()
                    .frame(width: 50.0, height: 50.0)
                    .font(.largeTitle)
                    .cornerRadius(25.0)
                VStack (alignment: .leading) {
                    Text(item.title)
                        .font(.headline)
                    Text(item.description)
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                }
            }
        }
    }
}

// The protocol and mock data struct
protocol Listable: Identifiable {
        
    var id: UUID { get set }
    var title: String { get set }
    var description: String { get set }
    var photo: Image { get set }
}

public struct MockListItem: Listable {
    
    public var photo: Image = Image(systemName:"photo")
    public var id = UUID()
    public var title: String = "Title"
    public var description: String = "This is the description"

    static let all = [MockListItem(), MockListItem(), MockListItem(), MockListItem()]
}

// A global API singleton for testing data updates
class GlobalAPI {
    
    static let shared = GlobalAPI()
    
    var listDidChange = PassthroughSubject<MockListItem, Never>()
    
    var newListItem:MockListItem? = nil {
        didSet {
            if let item = newListItem {
                listDidChange.send(item)
            }
        }
    }
    
    func addListItem() {
        newListItem = MockListItem()
    }
}

Это правильная реализация блока ViewBuilder или не рекомендуется пытаться передавать данные через блок View Builder?

ПРИМЕЧАНИЕ: ЧТО РАБОТАЕТ

Представление будет правильно нарисовано, если я напрямую передам статические данные Mock, как показано ниже:

struct TestView: View {

    public var body: some View {
        BlankView<MockListItem, VStack>() { items in // A list of items will get passed into the block
            VStack {
                Text("Add a row") // Button to add row via API singleton
                    .onTapGesture {
                        GlobalAPI.shared.addListItem()
                    }
                
                BasicListView(items: MockListItem.all) { // List view init'd with items
                    Text("Hold on to your butts") // Destination
                }
            }
        }
    }
}

Любые идеи? Всем спасибо за помощь и отзывы.

Answer 1

Вот фиксированный взгляд. Вы предоставляете модель извне, но состояние предназначено для внутренних изменений, и после создания оно сохраняется для того же представления. Таким образом, в этом сценарии состояние неверно - перестройка представления управляется внешними введенными данными.

Протестировано с Xcode 11.4 / iOS 13.4

struct BasicListView<Content: View, ListItem:Listable>: View {

    var items: [ListItem]
    var destination: () -> Content

    init(items: [ListItem], @ViewBuilder builder: @escaping () -> Content) {
        self.items = items // Items successfully init'd here
        self.destination = builder
    }

    var body: some View {
        List(items) { item in // Items that were passed into init no longer present here, this runs on a blank [ListItem] array
            BasicListCell(item: item, destination: self.destination)
        }
    }
}

Answer 2

Хорошо, думаю, я нашел решение.

Похоже, проблема заключалась в элементах в BasicListView завернутый в @State вместо того @Binding, а блок ViewBuilder имеет тип ([ListItem]) -> Content вместо того (Binding<[ListItem]>) -> Content. Исходная установка работала для инициализации из статических данных (MockListItem.all) извлекался извне блока, но при использовании данных, переданных в блок, где-то между init и вызываемым телом он отбрасывался / сбрасывался. Вместо этого я изменилitems в BasicListView к @Binding, а теперь инициализируется путем передачи привязки @State var list в BlankView. Вот обновленный код:

// This is the blank "shell" View that manages passing the data into the viewBuilder through the @ViewBuilder block

struct BlankView<ListItem, Content:View>: View where ListItem: Listable {
    
    let api = GlobalAPI.shared
    
    @State var list: [ListItem] = []
    
    var viewBuilder: (Binding<[ListItem]>) -> Content // Now passing Binding into the block instead of an array
    
    init(contentType: ContentType, @ViewBuilder builder: @escaping (Binding<[ListItem]>) -> Content) {
        self.viewBuilder = builder
    }
    
    var body: some View {
        
        viewBuilder($list) // Binding passed into ViewBuilder block
            .multilineTextAlignment(.center)
            .onReceive(GlobalAPI.shared.listDidChange) { item in
                if let newItem = item as? ListItem {
                    self.list.append(newItem) // Handle API updates here
                }
            }
    }
}

// Supporting code

// The generic list view/cell

struct BasicListView<Content: View, ListItem:Listable>: View {
    
    @Binding var items: [ListItem]
    
    var destination: () -> Content
    
    init(items: Binding<[ListItem]>, @ViewBuilder builder: @escaping () -> Content) {
        self._items = items
        self.destination = builder
    }
    
    var body: some View {
        List(items) { item in // Items passed into init now persist and correctly get rendered here, including when API updates the list.
            BasicListCell(item: item, destination: self.destination)
        }
    }
}

Надеюсь, это поможет кому-то там. Ура!