SwiftUI实战-仿写掘金APP（一）

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

一、TabView

首先创建页签TabView，分别创建首页、沸点、发现、小册、我几个页签对应的视图文件和文件夹。

二、首页-搜索栏

搜索栏的由两个模块构成：

• 1. 静态显示模块。并非真正的TextField文本输入域，点击之后会弹出真正的搜索页。
• 2. 搜索页。包含真正的TextField、搜索区域（展示搜索结果），还有搜索事件。

实现也可以参考SwiftUI实战-仿写微信App（三），不多做赘述。

静态模块

首页

三、搜索页

由于篇幅的问题，不啰嗦重复的内容，只说里面难点。

首先是综合、文章、小册、标签、用户这导航菜单。

5个菜单，点击对应的菜单，根据查询条件查询指定内容。点击的菜单需要变色并且加上下划线。

struct SearchMenuView: View {

    @Binding var searchTitleIndex: Int
    
    var body: some View {
        HStack(spacing: 20){
            
            ForEach(0..<Constants.menuTitles.count){index in
                
                if searchTitleIndex == index {
                    Button(action: {
                        searchTitleIndex = index
                    }, label: {
                        Text(Constants.menuTitles[index]).underline(true, color: Color.blue).foregroundColor(.blue)
                    })
                }else {
                    Button(action: {
                        searchTitleIndex = index
                    }, label: {
                        Text(Constants.menuTitles[index])
                    })
                }
            }
        }.foregroundColor(.gray)
    }
}
复制代码

• searchTitleIndex指定当前的菜单。
• if searchTitleIndex == index指定当前需要的菜单按钮是变色+下划线。反之，则没有变色，没有下划线，
• searchTitleIndex同样用来控制搜索页的placeholder内容。

四、排序与过滤

SwiftUI中提供了DisclosureGroup组件，用来展开和隐藏已知内容，不过还不够。

• 1. DisclosureGroup只能基于一个按钮展开，不符合当前2个按钮展开的需求。
• 2. DisclosureGroup自带了一个三角图标>，不符合当前的样式要求。

好在DisclosureGroup可以自由控制是否展开、隐藏，而且>可以隐藏掉。

这个代码太长就不贴代码了，感兴趣的可以看附录完整代码本机调试。

最终效果：

附录

代码地址