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

Question

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

我已经尝试过

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

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

有什么想法吗？

Answer 1

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

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

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”，所以它可能已经过时了。
但他还有一些有关几何阅读器的其他视频。
只需搜索“保罗·哈德森几何读本”