SwiftUI 可编辑导航标题

编程问答 2022-05-02

问题描述

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

解决方法

您可以将自定义视图放置在您的 NavigationView 中，通过指定位置值为 ToolbarItem 的 .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())
            }
          }
      }
    }
}

Screen grab of sample TextField in title bar

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

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

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

在工具栏的主要插槽中的 ToolbarItem 内尝试一个 TextField。为目的地创建一个计算属性，并为其提供一个可编辑的导航标题。

TextField Navigation Title

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)
                }
            }
    }
}
navigationbarnavigationbarnavigationbarnavigationviewnavigationviewswiftswiftswiftswiftswiftuitextfieldtextfieldtextfield