Question

我正在尝试为NavigationBar创建一个自定义后退按钮，可以在其中放置我喜欢的任何文本。我的主要用例是我的某些视图没有标题，当我从中单击到新视图时，导航栏中新视图的后退按钮没有文本，只有一个箭头。这使得用户很难点击它。我希望设置一个自定义的后退按钮，该按钮具有文本“ Back”（后退），但也具有后退按钮图标，并且可以与SwiftUI的动画机制完美配合。

这是我当前的尝试，将UIKit元素包装在View中，以便可以与SwiftUI一起使用：

struct CustomBackButton: UIViewControllerRepresentable {
    typealias UIViewControllerType = ViewController


    @Binding var title: String

    func makeUIView(context: Context) -> UIBarButtonItem {
        return UIBarButtonItem()
    }

    func updateUIView(_ uiView: UIBarButtonItem, context: Context) {
        uiView.title = title
    }
}

它显然不起作用，我目前不确定如何使其真正起作用。

我的理想情况是CustomBackButton可以这样工作，以便我可以像这样在SwiftUI中使用它：

    var body: some View {
        NavigationView {
            Text("Page with no title")
                .navigationBarItems(leading: CustomBackButton(title: "Back"))
                .navigationBarTitle("", displayMode: .large)
        }
    }

要正确地将CustomBackButton包装到SwiftUI View中，我该怎么做？

Answer 1

如果您只是想拥有自定义文本，则无需理会UIKit。在SwiftUI中制作自定义后退按钮的方法如下：

struct ViewWithCustomBackButton: View {
    @Environment(\.presentationMode) var presentationMode

    var body: some View {
        HStack {
            ...
        }
        .navigationBarTitle(Text("Your View"), displayMode: .inline)
        // Hide the system back button
        .navigationBarBackButtonHidden(true)
        // Add your custom back button here
        .navigationBarItems(leading:
            Button(action: {
                self.presentationMode.wrappedValue.dismiss()
            }) {
                HStack {
                    Image(systemName: "arrow.left.circle")
                    Text("Go Back")
                }
        })
    }
}

您也可以在此处查看答案以获取更多信息：Custom back button for NavigationView's navigation bar in SwiftUI

如何在SwiftUI视图中包装UIBarButtonItem？

1 个答案: