如何轻松自定义SwitUI导航栏返回图标

2024-01-21 10:35:56

轻松修改 SwiftUI 导航栏中的返回图标

在 SwiftUI 中，导航栏的默认返回图标可能并不总是符合您应用的审美或功能要求。本文将提供两种方法，教您如何轻松修改返回图标，使之更符合您的需要。

方法一：隐藏系统返回图标

使用 .navigationBarBackButtonHidden() 修饰符，您可以轻松地隐藏系统提供的返回图标。将此修饰符应用于导航栏视图即可实现隐藏。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(0..<10) { index in
                    NavigationLink(destination: Text("Detail View \(index)")) {
                        Text("Item \(index)")
                    }
                }
            }
            .navigationBarTitle("Main View")
            .navigationBarBackButtonHidden(true) // 隐藏系统返回图标
        }
    }
}

方法二：使用自定义按钮替换系统返回图标

如果您希望使用自定义按钮替换系统返回图标，则需要创建一个自定义导航栏标题视图。通过创建一个 UIViewRepresentable 结构体可以实现这一点。

struct CustomBackButton: UIViewRepresentable {
    let action: () -> Void

    func makeUIView(context: Context) -> UIButton {
        let button = UIButton(type: .custom)
        button.setImage(UIImage(systemName: "chevron.left"), for: .normal)
        button.addTarget(context.coordinator, action: #selector(Coordinator.backButtonTapped), for: .touchUpInside)
        return button
    }

    func updateUIView(_ uiView: UIButton, context: Context) {}

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject {
        var parent: CustomBackButton

        init(_ parent: CustomBackButton) {
            self.parent = parent
        }

        @objc func backButtonTapped() {
            parent.action()
        }
    }
}

然后，您可以在导航栏标题视图中使用 CustomBackButton 结构体。

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(0..<10) { index in
                    NavigationLink(destination: Text("Detail View \(index)")) {
                        Text("Item \(index)")
                    }
                }
            }
            .navigationBarTitle("", displayMode: .inline)
            .navigationBarItems(leading: CustomBackButton(action: {
                // 返回操作
            }))
        }
    }
}