为你的 SwiftUI 应用添加平滑导航栏过渡

2023-09-04 04:10:59

【代码实战】探索 SwiftUI 中的导航栏平滑过渡 #

从一个空项目开始

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

import SwiftUI

struct ContentView: View {
  @State private var selectedTab = 1

  var body: some View {
    TabView(selection: $selectedTab) {
      Text("First Tab")
        .tabItem {
          Label("First", systemImage: "house.fill")
        }
        .tag(1)

      Text("Second Tab")
        .tabItem {
          Label("Second", systemImage: "heart.fill")
        }
        .tag(2)
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

创建自定义 UINavigationBar

在项目中创建一个新的 Swift 文件，命名为 "CustomNavigationBar.swift"。
在文件中添加以下代码：

import SwiftUI

struct CustomNavigationBar: View {
  @Binding var selectedTab: Int

  var body: some View {
    ZStack {
      Color("CustomNavigationBarColor")

      HStack {
        Button(action: {
          selectedTab = 1
        }) {
          Image(systemName: "house.fill")
            .foregroundColor(selectedTab == 1 ? .white : .gray)
        }

        Button(action: {
          selectedTab = 2
        }) {
          Image(systemName: "heart.fill")
            .foregroundColor(selectedTab == 2 ? .white : .gray)
        }
      }
      .frame(maxWidth: .infinity)
    }
    .frame(height: 44)
  }
}

使用自定义 UINavigationBar

在 ContentView.swift 中，将 NavigationBarTitle("My App") 替换为 CustomNavigationBar(selectedTab: $selectedTab)。

import SwiftUI

struct ContentView: View {
  @State private var selectedTab = 1

  var body: some View {
    TabView(selection: $selectedTab) {
      Text("First Tab")
        .tabItem {
          Label("First", systemImage: "house.fill")
        }
        .tag(1)

      Text("Second Tab")
        .tabItem {
          Label("Second", systemImage: "heart.fill")
        }
        .tag(2)
    }
    .navigationBarTitle("")
    .navigationBarItems(leading: CustomNavigationBar(selectedTab: $selectedTab))
  }
}