SwiftUI伸缩式导航栏打造更灵活的App体验

2023-10-23 15:07:48

引言

在现代应用开发中，导航栏是必不可少的UI元素，它为用户提供了在不同页面之间切换的途径。传统的导航栏通常是固定的，占据屏幕顶部的空间，随着用户滚动内容，导航栏依然保持不变。但随着移动设备屏幕尺寸的不断增大，固定导航栏可能会占用过多的屏幕空间，影响用户的内容浏览体验。

为了解决这一问题，SwiftUI引入了一种新的导航栏类型——伸缩式导航栏（Collapsible Navigation Bar）。伸缩式导航栏可以随着用户滚动内容而动态隐藏和显示，当用户滚动到页面顶部时，导航栏会自动展开，显示标题、按钮等元素；当用户向下滚动时，导航栏会逐渐缩小并最终隐藏，腾出更多的空间给内容显示。

实现原理

SwiftUI的伸缩式导航栏是通过滚动视图（ScrollView）、ZStack和几何阅读器（GeometryReader）等特性来实现的。

滚动视图：滚动视图是伸缩式导航栏的核心组件，它负责管理内容的滚动行为。滚动视图可以监听用户的滚动事件，并根据用户滚动的位置来控制导航栏的显示和隐藏。
ZStack：ZStack是一个堆叠视图，它可以将多个视图堆叠在一起，并控制它们的显示顺序。在伸缩式导航栏中，ZStack被用来将导航栏和内容视图堆叠在一起，并根据导航栏的显示状态来控制它们的层级。
几何阅读器：几何阅读器是一个特殊的视图，它可以获取它所包含视图的大小和位置信息。在伸缩式导航栏中，几何阅读器被用来获取导航栏的frame，并根据frame的大小来控制导航栏的显示和隐藏。

创建伸缩式导航栏

创建一个新的SwiftUI项目。
在ContentView.swift文件中，添加以下代码：

struct ContentView: View {
    @State private var offset: CGFloat = 0

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // 内容视图
                ScrollView {
                    Text("内容1")
                    Text("内容2")
                    Text("内容3")
                    Text("内容4")
                    Text("内容5")
                }

                // 导航栏
                VStack {
                    HStack {
                        Text("标题")
                            .font(.largeTitle)
                            .padding()
                        Spacer()
                    }
                    Divider()
                }
                .frame(height: geometry.safeAreaInsets.top)
                .background(Color.white)
                .offset(y: offset)
            }
        }
        .ignoresSafeArea(.all, edges: .top)
        .onReceive(NotificationCenter.default.publisher(for: UIApplication.didScrollNotification)) { _ in
            let newOffset = -geometry.safeAreaInsets.top
            if newOffset < 0 {
                offset = newOffset
            }
        }
    }
}