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

Question

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

我试过了

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

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

有任何想法吗？

Answer 1

首先，我解释一下为什么您的代码不起作用：\n当您开始滚动时，只有 navigationTitle 的大小发生变化，而不是整个工具栏或其项目的大小。

\n

但我想我有一个解决方案：

\n

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

\n

代码的作用是：它从第一个（在本示例中）列表项获取顶部 Y 位置。\n然后检查第一个列表项是否位于标题栏下方，并在必要时更改标题的字体大小。\n我看到的唯一问题是小标题和大标题之间有一个相当粗糙的过渡，但我认为你可以弄清楚如何解决这个问题。

\n

如果您对代码如何工作有更多疑问，请询问

\n

我希望这能解决你的问题。

\n

我建议您观看有关几何阅读器的 Paul Hudson\xe2\x80\x99s 视频（他\xe2\x80\x99s 是一位出色的 YouTuber）： https: //youtu.be/kh9lnIYgW1E

\n

我刚刚意识到视频标题中写着\xe2\x80\x9eOLD\xe2\x80\x9c，所以它可能已经过时了。\n但是他还有一些关于几何阅读器的其他视频。\n只需搜索\xe2\x80\ x9ePaul Hudson 几何阅读器\xe2\x80\x9c

\n