SwiftUI可编辑导航标题

93ze6v8z  于 2022-10-31  发布在  Swift
关注(0)|答案(2)|浏览(157)

SwiftUI的导航标题可以编辑吗?不幸的是navigationTitle修改器只接受Text视图,而不接受TextField视图。我想这样做,而不是仅仅使用导航栏下面的文本字段,因为我仍然希望在用户向下滚动时,导航栏分配导航标题的空间,无论是否定义导航标题。

uajslkp6

uajslkp61#

iOS/iPadOS 16及以上版本,macOS 13及以上版本

navigationTitle修饰符现在接受一个Binding<String>参数,以及更常见的基于String的初始化器。
当使用绑定值并且导航栏是内联形式时,标题会获得一个带有Rename选项的下拉菜单。点击该选项允许用户编辑视图的标题:

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

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

这与始终使用文本字段的UX不完全相同,但由于它是标准的SwiftUI实现,因此实现起来要容易得多。

对于iOS的早期版本

您可以在NavigationView中将自定义视图放置在标题可能出现的位置,方法是指定一个位置值为.principalToolbarItem,如下面的代码所示。我添加了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将一个视图压入堆栈,您希望在后退按钮和长按时出现的堆栈视图列表中出现一个有意义的名称。
1.我还没有检查过当你有一个没有标题的导航子视图时,VoiceOver会发生什么。你越是覆盖原生行为,你就越需要考虑你是否让你的应用程序比SwiftUI默认提供的更难访问。

68bkxrlz

68bkxrlz2#

请尝试在工具栏主体槽中的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)
                }
            }
    }
}

相关问题