SwiftUI 可编辑导航标题答案

【问题标题】：SwiftUI Editable NavigationTitleSwiftUI 可编辑导航标题
【发布时间】：2021-05-09 18:36:27
【问题描述】：

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

【问题讨论】：

标签： swift swiftui textfield navigationbar navigationview

【解决方案1】：

您可以在 NavigationView 中将自定义视图放置在标题可能出现的位置，方法是指定放置值为 .principal 的 ToolbarItem，例如在下面的代码中。我添加了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 默认设置。

【讨论】：

【解决方案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)
                }
            }
    }
}

【讨论】：