SwiftUI List 重绘已呈现工作表的内容

Question

当List 内容发生更改时，我遇到了与呈现.sheet 相关的SwiftUI 问题。让我详细解释一下情况。

我提供了您可以克隆的a sample example on Github，以便您轻松重现该错误。

上下文

---

我只有 2 个视图：

• PlaylistCreationView
• SearchView

他们每个人的视图模型分别称为PlaylistCreationViewModel 和SearchViewModel。

PlaylistCreationView 有一个Add Songs 按钮，女巫将显示SearchView 有一个sheet。当用户在搜索结果中触摸一首歌曲时，SearchView 发送一个 onAddSong 完成处理程序，该处理程序将通知 PlaylistCreationView 一首歌曲已添加。

这里有一个简单的情景模式：

这里也是一些视图的截图：

播放列表创建视图

搜索视图

问题

当用户触摸SearchView 中的歌曲时，SearchView 的内容会被重绘。我的意思是视图被重新创建。如果第一次再次加载该视图，则会显示该视图。就像这样：

为了简化问题，这里是另一种情况的模式：

这是我在触摸一首歌后观察到的：

如您所见，歌曲已正确添加到播放列表，但 SearchView 现在为空白，因为它已被重新创建。

我无法解释的是，为什么 PlaylistCreationViewModel 中的列表更改会导致重新绘制呈现的 sheet。

如何重现问题

---

我提供了您可以克隆的a sample example on Github。重现问题：

1. 克隆项目并在任何 iPhone 模拟器上运行它。
2. 触摸“添加歌曲”。
3. 在搜索视图顶部的搜索栏中输入内容。
4. 选择一首歌曲。您的搜索应该已经消失，因为视图已经重建。

代码

---

播放列表创建视图模型

final class PlaylistCreationViewModel: ObservableObject {
    
    @Published var sheetType: SheetType?
    @Published var songs: [String] = []
    
}

extension PlaylistCreationViewModel {
    
    enum SheetType: String, Identifiable {
        
        case search
        
        var id: String {
            rawValue
        }
        
    }
    
}

播放列表创建视图

struct PlaylistCreationView: View {
    
    @ObservedObject var viewModel: PlaylistCreationViewModel
    
    var body: some View {
        NavigationView {
            List {
                ForEach(viewModel.songs, id: \.self) { song in
                    Text(song)
                }
                Button("Add Song") {
                    viewModel.sheetType = .search
                }
                .foregroundColor(.accentColor)
            }
            .navigationTitle("Playlist")
        }
        .sheet(item: $viewModel.sheetType) { _ in
            sheetView
        }
    }
    
    private var sheetView: some View {
        let addingMode: SearchViewModel.AddingMode = .playlist { addedSong in
            // This line leads SwiftUI to rebuild the SearchView
            viewModel.songs.append(addedSong)
        }
        let sheetViewModel: SearchViewModel = SearchViewModel(addingMode: addingMode)
        return NavigationView {
            SearchView(viewModel: sheetViewModel)
                .navigationTitle("Search")
        }
    }
    
}

搜索视图模型

final class SearchViewModel: ObservableObject {
    
    @Published var search: String = ""
    let songs: [String] = ["Within", "One more time", "Veridis quo"]
    let addingMode: AddingMode
    
    init(addingMode: AddingMode) {
        self.addingMode = addingMode
    }
    
}

extension SearchViewModel {
    
    enum AddingMode {
        
        case playlist(onAddSong: (_ song: String) -> Void)
        
    }
    
}

搜索视图

struct SearchView: View {
    
    @ObservedObject var viewModel: SearchViewModel
    
    var body: some View {
        VStack {
            TextField("Search", text: $viewModel.search)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            List(viewModel.songs, id: \.self) { song in
                Button(song) {
                    switch viewModel.addingMode {
                    case .playlist(onAddSong: let onAddSong):
                        onAddSong(song)
                    }
                }
            }
        }
    }
    
}

我很确定我缺少一些 SwiftUI 的东西。但我无法得到它。我以前没有遇到过这样的情况。我在网上找不到任何东西。

任何帮助或建议将不胜感激。提前感谢任何愿意花时间阅读和理解问题的人。我希望我已经足够好地描述了这个问题。

Answer 1

问题

当您点击SearchView 中的歌曲时，您正在调用closure 块，该块在Sheet 视图中定义。下面的代码-：

private var sheetView: some View {
    let addingMode: SearchViewModel.AddingMode = .playlist { addedSong in
        // This line leads SwiftUI to rebuild the SearchView
        viewModel.songs.append(addedSong)
    }
    let sheetViewModel: SearchViewModel = SearchViewModel(addingMode: addingMode)
    return NavigationView {
        SearchView(viewModel: sheetViewModel)
            .navigationTitle("Search")
    }
}

这个闭包的目标是在Songs 数组中添加选定的歌曲，存在于PlaylistCreationViewModel 类中。下面是那个类-：

final class PlaylistCreationViewModel: ObservableObject {
    
    @Published var sheetType: SheetType?
    @Published var songs: [String] = []
    
}

你可以看到这个类是 ObservableObject ，而你的 songs 数组是 @Published 属性，只要你向这个数组中添加一首歌曲，任何使用这个模型并标有 @ObservedObject 的类将刷新其 body 。在您的情况下，该类低于-：

struct PlaylistCreationView: View {
    
    @ObservedObject var viewModel: PlaylistCreationViewModel
    
    var body: some View {
        NavigationView {
            List {
                ForEach(viewModel.songs, id: \.self) { song in
                    Text(song)
                }
                Button("Add Song") {
                    viewModel.sheetType = .search
                }
                .foregroundColor(.accentColor)
            }
            .navigationTitle("Playlist")
        }
        .sheet(item: $viewModel.sheetType) { _ in
            sheetView
        }
    }
    
    private var sheetView: some View {
        let addingMode: SearchViewModel.AddingMode = .playlist { addedSong in
            // This line leads SwiftUI to rebuild the SearchView
            viewModel.songs.append(addedSong)
        }
        let sheetViewModel: SearchViewModel = SearchViewModel(addingMode: addingMode)
        return NavigationView {
            SearchView(viewModel: sheetViewModel)
                .navigationTitle("Search")
        }
    }

现在当这个视图在添加歌曲后刷新时，它也会重新加载sheetView 视图，为什么？因为您的工作表正在从viewModel.sheetType 读取其状态，其值仍设置为.search

现在，当调用 sheet 时，它还会再次创建 SearchViewModel 对象，并将其提供给 SearchView，因此您将获得完整的 new Object 搜索字符串为空。下面是那个模型类-：

final class SearchViewModel: ObservableObject {
    
    @Published var search: String = ""
    let songs: [String] = ["Within", "One more time", "Veridis quo"]
    let addingMode: AddingMode
    
    init(addingMode: AddingMode) {
        self.addingMode = addingMode
    }
    
}

解决方案-：

您可以将addingMode 和sheetViewModel 属性移到sheetView 之外，并将它们放在PlaylistCreationView 中，就在body 属性上方。这样，当刷新工作表时，您的对象就不会每次都从头开始实例化。

工作代码-：

mport SwiftUI

struct PlaylistCreationView: View {
    
    @ObservedObject var viewModel: PlaylistCreationViewModel
    var sheetViewModel: SearchViewModel
    
    init(viewModel:PlaylistCreationViewModel) {
        _viewModel = ObservedObject(wrappedValue: viewModel)
         sheetViewModel = SearchViewModel(addingMode: .playlist(onAddSong: {  addSong in
            viewModel.songs.append(addSong)
        }))
        
    }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(viewModel.songs, id: \.self) { song in
                    Text(song)
                }
                Button("Add Song") {
                    viewModel.sheetType = .search
                }
                .foregroundColor(.accentColor)
            }
            .navigationTitle("Playlist")
        }
        .sheet(item: $viewModel.sheetType) { _ in
            sheetView
        }
    }
    
    private var sheetView: some View {
         NavigationView {
            SearchView(model: sheetViewModel)
                .navigationTitle("Search")
        }
    }
    
}

SearchView-:

import SwiftUI

struct SearchView: View {
    
    @ObservedObject var viewModel: SearchViewModel
    
    init(model:SearchViewModel) {
        _viewModel = ObservedObject(wrappedValue: model)
    }
    
    var body: some View {
        VStack {
            TextField("Search", text: $viewModel.search)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            List(viewModel.songs, id: \.self) { song in
                Button(song) {
                    switch viewModel.addingMode {
                    case .playlist(onAddSong: let onAddSong):
                        onAddSong(song)
                    }
                }
            }
        }
    }
    
}