SwiftUI 可编辑导航标题

Question

是否可以使 SwiftUI 的导航标题可编辑？不幸的是navigationTitle修饰符只接受Text视图而不接受TextField视图。我想这样做，而不是仅仅使用导航栏下方的文本字段，因为我仍然希望当用户向下滚动并且导航栏为导航标题分配空间时，修改后的标题会内联显示在导航栏中。不管你是否定义了一个。

Answer 1

iOS/iPadOS 16+、macOS 13+

修饰符navigationTitle现在接受一个Binding<String>参数，以及更常见的String基于 - 的初始值设定项。

当使用绑定值并且导航栏处于内联形式时，标题将获得一个带有“重命名”选项的下拉菜单。点击此按钮允许用户编辑视图的标题：

struct EditableTitleView: View {
    @State private var title = "View Title"

    var body: some View {
        Text("Editable Title View")
            .navigationTitle($title)
            .navigationBarTitleDisplayMode(.inline)
    }
}

这与通常使用文本字段的 UX 并不完全相同，但由于它是标准 SwiftUI 实现，因此更容易实现。

对于早期版本的 iOS

ToolbarItem您可以通过指定放置值为 的a 来将自定义视图放置在您的 NavigationView 中预期标题所在的位置.principal，例如在下面的代码中。我添加了RoundedBorderTextFieldStyle以使文本字段更加明显：

struct EditableTitleView: View {
  @State private var editableTitle: String = "My Title"
    var body: some View {
      NavigationView {
        Text("View with editable title")
          .toolbar {
            ToolbarItem(placement: .principal) {
              TextField("Title", text: $editableTitle)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            }
          }
      }
    }
}

请注意，如果您还在navigationTitle视图中添加了修饰符，则其在 iOS 上的默认大样式仍将显示在工具栏下方，但如果它滚动离开页面，它会消失，而您的主要项目将保留在屏幕上。如果你设置.navigationBarTitleDisplayMode(.inline)，则较大的样式标题将永远不会显示。

我提到这一点是因为无论如何你都应该考虑为你的视图保留一个标题，原因如下：

1. 如果一个NavigationLink将视图推送到堆栈上，您希望在后退按钮和长按时出现的堆栈视图列表中显示一个有意义的名称。
2. 我还没有检查当您的导航子视图没有标题时 VoiceOver 会发生什么情况。您覆盖本机行为的次数越多，您就越需要考虑是否使您的应用程序比 SwiftUI 默认提供的更难访问。