SwiftUI 自定义导航栏

状态图

在开发移动应用程序时，导航栏是一个非常常见的UI元素。它通常用于显示标题、导航按钮和其他操作按钮。在iOS开发中，我们可以使用SwiftUI来创建自定义导航栏。

1. 创建导航栏视图

首先，我们需要创建一个自定义的导航栏视图。这可以通过创建一个新的NavigationView并将其放置在顶级视图中来实现。以下是一个示例代码：

struct CustomNavigationBar: View {
    var body: some View {
        VStack {
            Text("Custom Navigation Bar")
                .font(.title)
                .foregroundColor(.white)
                .padding()
            
            Spacer()
        }
        .frame(maxWidth: .infinity)
        .background(Color.blue)
    }
}

在上面的代码中，我们创建了一个垂直居中的VStack，并在其中添加了一个标题文本。我们还使用.frame(maxWidth: .infinity)将视图的宽度设置为最大值，并使用.background(Color.blue)将背景色设置为蓝色。

2. 自定义导航栏按钮

接下来，我们可以在自定义导航栏中添加自定义按钮。我们可以使用SwiftUI的Button视图来创建按钮，并使用navigationBarItems修饰符将它们添加到导航栏中。以下是一个示例代码：

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, World!")
            }
            .navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarItems(trailing:
                HStack {
                    Button(action: {
                        // 点击了右侧按钮
                    }) {
                        Image(systemName: "plus")
                    }
                    
                    Button(action: {
                        // 点击了另一个右侧按钮
                    }) {
                        Image(systemName: "gear")
                    }
                }
            )
            .overlay(CustomNavigationBar().edgesIgnoringSafeArea(.top))
        }
    }
}

在上面的代码中，我们创建了两个按钮并将它们放在导航栏的右侧。我们使用Image(systemName:)来设置按钮的图标，并使用Button(action:)来监听按钮的点击事件。

3. 自定义导航栏样式

除了自定义导航栏的内容，我们还可以自定义导航栏的样式。例如，我们可以更改导航栏的背景颜色、标题字体和按钮颜色等。以下是一个示例代码：

struct ContentView: View {
    init() {
        UINavigationBar.appearance().backgroundColor = .blue
        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.white]
        UINavigationBar.appearance().tintColor = .white
    }
    
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, World!")
            }
            .navigationBarTitle("")
            .navigationBarHidden(true)
            .navigationBarItems(trailing:
                HStack {
                    Button(action: {
                        // 点击了右侧按钮
                    }) {
                        Image(systemName: "plus")
                    }
                    
                    Button(action: {
                        // 点击了另一个右侧按钮
                    }) {
                        Image(systemName: "gear")
                    }
                }
            )
            .overlay(CustomNavigationBar().edgesIgnoringSafeArea(.top))
        }
    }
}

在上面的代码中，我们使用UINavigationBar.appearance()来设置全局导航栏的样式。我们将背景颜色设置为蓝色，标题字体设置为白色，并将按钮颜色设置为白色。

4. 结论

使用SwiftUI，我们可以轻松地创建自定义导航栏。我们可以自定义导航栏的内容、按钮和样式，以满足我们的设计需求。希望本文能帮助你创建自己的自定义导航栏。

以上就是关于SwiftUI自定义导航栏的简要介绍和示例代码。希望对你有所帮助！

stateDiagram
    [*] --> CustomNavigationBar
    CustomNavigationBar --> ContentView
    ContentView --> Button
    Button --> ContentView

参考资料：

  • [SwiftUI - NavigationView](
  • [SwiftUI - Button](