SwiftUI 可编辑的 NavigationTitle

Question

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

Answer 1

您可以通过指定 ToolbarItem 和放置值 .principal，将自定义视图放置在 NavigationView 中标题可能出现的位置，例如在下面的代码中.我添加了 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) 那么较大的样式标题将永远不会显示。

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

如果 NavigationLink 将视图压入堆栈，您希望在后退按钮和长按时出现的堆栈视图列表中显示一个有意义的名称。
我还没有检查当你有一个没有标题的导航子视图时 VoiceOver 会发生什么。覆盖本机行为的次数越多，您就越需要考虑是否让您的应用程序的可访问性低于 SwiftUI 默认设置所提供的。

Answer 2

尝试在工具栏主槽中的 ToolbarItem 中使用 TextField。为目的地创建一个计算属性并给它一个可编辑的导航标题。

struct TextFieldNavigationTitleView: View {
    @State var mainTitle = "Main Menu"
    @State var areaOneTitle = "Area One"

    var body: some View {
        NavigationView {
            NavigationLink("App Area One", destination: areaOne)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    TextField("Navigation Title", text: $mainTitle)
                }
            }
        }
    }
    
    var areaOne : some View {
        Text("AREA ONE")
            .toolbar {
                ToolbarItem(placement: .principal) {
                    TextField("Area One Title", text: $areaOneTitle)
                }
            }
    }
}

SwiftUI 可编辑的 NavigationTitle

SwiftUI Editable NavigationTitle

textfield

navigationbar

swift

navigationview

swiftui