顶部搜索栏
再往上是顶部搜索栏，如下代码所示：
// MARK: 搜索栏 func searchBarView() -> some View { TextField("搜索内容", text: $viewModel.searchText) .padding(7) .padding(.horizontal, 25) .background(Color(.systemGray6)) .cornerRadius(8) .overlay( HStack { Image(systemName: "magnifyingglass") .foregroundColor(.gray) .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading) .padding(.leading, 8) // 编辑时显示清除按钮 if viewModel.searchText != "" { Button(action: { self.viewModel.searchText = "" self.viewModel.loadItems() }) { Image(systemName: "multiply.circle.fill") .foregroundColor(.gray) .padding(.trailing, 8) } } } ) .padding(.horizontal, 10) .onChange(of: viewModel.searchText) { _ in if viewModel.searchText != "" { self.viewModel.isSearching = true self.viewModel.searchContet() } else { viewModel.searchText = "" self.viewModel.isSearching = false self.viewModel.loadItems() } } }
搜索栏改动的内容有三部分，首先是绑定的输入内容换成了viewModel中的searchText。
然后是当搜索栏输入时，显示删除的按钮操作，关联的参数也换成viewModel中的searchText，当点击清除搜索内容时，需要将搜索栏输入的内容清空，然后再调用loadItems重新加载列表中的数据。
最后是搜索栏的搜索方法，当输入时，读取searchText输入的内容，如果输入内容不为空，则更新isSearching是否正在搜索的状态为true，然后调用searchContet搜索方法。如果输入的内容为空，那么更新isSearching是否正在搜索的状态为false，并调用loadItems重新加载列表数据。
新建笔记按钮
新建笔记按钮的操作是打开新建笔记弹窗，修改内容如下代码所示：
// MARK: 新建笔记按钮 func newBtnView() -> some View { VStack { Spacer() HStack { Spacer() Button(action: { self.viewModel.isAdd = true self.viewModel.writeTime = viewModel.getCurrentTime() self.viewModel.title = "" self.viewModel.content = "" self.viewModel.showNewNoteView = true }) { Image(systemName: "plus.circle.fill") .font(.system(size: 48)) .foregroundColor(.blue) } } } .padding(.bottom, 32) .padding(.trailing, 32) }
新建笔记按钮修改点就只有点击时的交互动作，当点击新建笔记按钮时，需要更新viewModel中的是否新增状态isAdd为true，表明点击这个按钮是新增，而我们在单条笔记列表设置isAdd为false，表示当前是在编辑笔记。
当新增笔记的时候，调用getCurrentTime设置新建笔记的时间为当前时间，设置title标题、content内容为空，并且更新showNewNoteView为true，作为打开新建笔记弹窗的触发参数。
主视图
缺省图视图基本就不用改了，最后回到body部分，修改如下代码所示：
var body: some View { NavigationView { ZStack { if viewModel.isSearching == false && viewModel.noteModels.count == 0 { noDataView() } else { VStack { searchBarView() noteListView() } } newBtnView() } .navigationBarTitle("念头笔记", displayMode: .inline) } .sheet(isPresented: $viewModel.showNewNoteView) { //打开新建笔记弹窗 } }
上述代码中，我们通过判断isSearching当前是否处于搜索状态，以及noteModels数组是是否有数据，来判断当前应该展示缺省视图noDataView，还是展示searchBarView搜索栏和noteListView笔记列表。
已经在首页增加sheet绑定showNewNoteView触发打开新建笔记弹窗。
最后，我们还需要在视图预览的时候引用viewModel，如下代码所示：
struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView().environmentObject(ViewModel()) } }
好了，首页基本修改完毕了，是不是有点疲劳？回看下整个ContentView的代码，是不是简洁了很多，基本没有声明什么参数，因为需要用到的参数都放在了ViewModel里，而且用到的实现功能的方法也都放在ViewModel。
Model用来定义数据模型，View视图用来实现基础交互和页面样式，然后ViewModel用来做数据处理和功能实现，这就是MVVM开发模式。
休息好了，我们就继续吧～
