SwiftUI MVVM架构案例(教程含源码)

什么是 MVVM 架构

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

看看SwiftUI如何实现

1、主界面代码

import SwiftUI

struct Sidebar: View {
    @StateObject private var viewModel = SidebarViewModel()
    @State private var isSearchPopoverPresented = false
    
    var body: some View {
        List(selection: $viewModel.selection) {
            ForEach(SidebarViewModel.MainSubreddits.allCases, id: \.self) { item in
                NavigationLink(destination: SubredditView(name: item.rawValue)) {
                    Label(LocalizedStringKey(item.rawValue.capitalized), systemImage: item.icon())
                }.tag(item.rawValue)
            }
 
            Divider()
            
            Group {
                Text("Account").foregroundColor(.white)
                Label("Profile", systemImage: "person.crop.square")
                Label("Inbox", systemImage: "envelope")
                Label("Posts", systemImage: "square.and.pencil")
                Label("Comments", systemImage: "bubble.middle.bottom.fill")
                Label("Saved", systemImage: "archivebox")
            }.listItemTint(Color("RedditGold"))
            
            Divider()
            
            Group {
                subredditsHeader.foregroundColor(.white)
                Label("r/games", systemImage: "globe")
                Label("r/gaming", systemImage: "globe")
                Label("r/fun", systemImage: "globe")
                Label("r/Diablo", systemImage: "globe")
            }.listItemTint(Color("RedditBlue"))
        }
        .listStyle(SidebarListStyle())
        .frame(minWidth: 150, idealWidth: 150, maxWidth: 200, maxHeight: .infinity)
        .padding(.top, 16)
    }
    
    private var subredditsHeader: some View {
        HStack {
            Text("Subreddits")
            Button {
                isSearchPopoverPresented = true
            } label: {
                Image(systemName: "plus.circle")
                    .imageScale(.large)
                    .foregroundColor(.blue)
            }
            .buttonStyle(BorderlessButtonStyle())
            .popover(isPresented: $isSearchPopoverPresented) {
                SearchSubredditsPopover()
            }

        }
    }
}

2、ViewModel代码

import Foundation
import SwiftUI

class SidebarViewModel: ObservableObject {
    enum MainSubreddits: String, CaseIterable {
        case best, hot, new, top, rising
        
        func icon() -> String {
            switch self {
            case .best: return "airplane"
            case .hot: return "flame.fill"
            case .new: return "calendar.circle"
            case .top: return "chart.bar.fill"
            case .rising: return "waveform.path.ecg"
            }
        }
    }
    
    @Published var selection: Set<String> = [MainSubreddits.best.rawValue]
}

推荐

基础文章推荐

• 《SwiftUI是什么，听听大牛们如何说》

经典教程推荐

• 更新近百篇SwiftUI教程《SwiftUI2020教程》
• 帮您突破数据存储难关《SwiftUI vs CoreData数据存储解决方案》

上新

• 《WWDC2020专栏》
• 《SwiftUI WWDC2020 新增组件列表》

技术源码推荐

推荐文章

CoreData篇

• SwiftUI数据存储之做个笔记App 新增与查询(CoreData)
• SwiftUI进阶之存储用户状态实现登录与登出
• SwiftUI 数据之List显示Sqlite数据库内容（2020年教程）

Combine篇

• 一篇文章学懂弄通SwiftUI与Combine(含轮播动画App源码)

TextField篇

• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• 《SwiftUI实战之TextField风格自定义与formatters》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》
• 《SwiftUI 当键盘出现时避免TextField被遮挡自动向上移动》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》

JSON文件篇

• SwiftUI JSON文件下载、存储、解析和展示(代码大全)

---

一篇文章系列

• SwiftUI一篇文章全面掌握List(教程和源码)
• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• SwiftUI一篇文章全面掌握Picker,解决数据选择(教程和源码)
• SwiftUI一篇文章全面掌握Form(教程和源码)
• SwiftUI Color 颜色一篇文章全解决

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970