阅读 3141
SwiftUI实战-仿写掘金APP(一)

SwiftUI实战-仿写掘金APP(一)

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

image.png

一、TabView

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

image.png

二、首页-搜索栏

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

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

实现也可以参考SwiftUI实战-仿写微信App(三),不多做赘述。

静态模块

image.png

首页

image.png

三、搜索页

image.png

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

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

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内容。

image.png

四、排序与过滤

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

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

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

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

最终效果:

屏幕录制2021-08-15 16.22.54.gif

附录

代码地址

文章分类
iOS
文章标签