SwiftUI - 如何使导航栏标题可编辑（而不改变任何其他行为）？

Question

我很喜欢SwiftUI中导航栏标题的外观，它出现在安全区域的正下方，但当向下滚动时会出现在工具栏的主要部分。我想知道如何完全复制这种外观和行为，但使用户可以编辑它（很可能通过文本字段）。

我尝试过：

.toolbar {
  ToolbarItem(placement: .principal) {
    TextField("Navigation Title", text: $mainTitle)
  }
}

但这只是将标题始终放置在工具栏中，而不是仅在滚动时略微显示。

有什么想法吗？

- Nicolas Gimelli

---

您想在导航栏中同时显示大标题和小标题吗？还是只显示小标题？ - ChrisR

两者都有，但是在不同的时间。当滚动到屏幕顶部时（没有小标题），使用大导航标题，稍微向下滚动后使用小标题。值得注意的是，标准导航栏标题会将大标题动画转换为小标题。 - Nicolas Gimelli

我也是这么想的 :) 在SwitUI中没有真正的方法可以做到这一点，因为您无法访问标题的行为。当然，您可以以某种方式进行“自定义重建”。 - ChrisR

Answer 1

首先，我解释一下为什么你的代码不起作用： 当你开始滚动时，只有导航标题的大小会改变，而不是整个工具栏或其项目的大小。

但我认为我有一个解决方案：

import SwiftUI

struct ContentView: View {
    @State private var title: String = "Title"
    @State private var titleSmall: Bool = false

    var body: some View {
        NavigationView {
            List {
                GeometryReader { geo in
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundColor(.accentColor)
                        .onChange(of: geo.frame(in: .global).minY) { val in
                            if val <= 53.5 {
                                titleSmall = true
                            } else {
                                titleSmall = false
                            }
                        }
                }
                Text("Hello, world!")
            }
            .toolbar {
                ToolbarItem(placement: .principal) {
                    TextField("Title", text: $title)
                        .multilineTextAlignment(.center)
                        .font(titleSmall ? .headline : .largeTitle.bold())
                        .accessibilityAddTraits(.isHeader)
                }
            }
        }
    }
}

代码的功能是：从第一个（在此示例中）列表项获取顶部Y位置。然后检查第一个列表项是否在标题栏下方，并在必要时更改标题的字体大小。 我看到的唯一问题是小标题和大标题之间有一个相当粗糙的过渡，但我认为你可以想办法解决这个问题。

如果您对代码的工作原理有更多问题，请随时问。

希望这能解决您的问题。

我建议您观看Paul Hudson关于Geometry Reader的视频（他是一个很棒的YouTuber）：https://youtu.be/kh9lnIYgW1E 我刚意识到视频标题上写着“OLD”，所以它可能已经过时了。但是他还有其他关于Geometry Reader的视频。只需搜索“Paul Hudson Geometry Reader”即可。

- TheBlckbird