在 SwiftUI 中的导航栏标题下方添加附件视图答案

【问题标题】：Add accessory view below navigation bar title in SwiftUI在 SwiftUI 中的导航栏标题下方添加附件视图
【发布时间】：2022-01-17 18:12:07
【问题描述】：

我正在尝试添加一个嵌入在导航栏中的附件视图标题下方，可以在默认的 iOS 日历应用程序（“s m t w t f s”行）或 GitHub 移动应用程序中看到：

我希望它能够与 GH 手机等大型标题样式导航栏一起使用。

LazyVStack 的 pinnedView 带有部分标题几乎可以工作，但我无法获得背景颜色以使其与导航栏无关，即使使用 ultraThinMaterial。它还会在固定视图和栏之间留下分隔线。

有没有办法实现这种布局？欢迎使用 SwiftUI、SwiftUI+Introspect、UIKit 解决方案！

【问题讨论】：

标签： ios swift swiftui uinavigationbar swiftui-navigationview

【解决方案1】：

您是否尝试过设置.safeAreaInset 视图？这将具有您正在寻找的粘性，并且视图的“主要”部分中的项目将在渲染时考虑其高度，因此不会被遮挡。

这是我敲出的一个简单示例：

struct ContentView: View {
    var body: some View {
      NavigationView {
        List {
          ForEach(0 ..< 30) { item in
            Text("Hello, world!")
          }
        }
        .navigationTitle("Accessory View")
        .safeAreaInset(edge: .top) {
          AccessoryView()
        }
      }
    }
}

struct AccessoryView: View {
  var body: some View {
    HStack {
      Button("Button") { }
      Button("Button") { }
      Button("Button") { }
      Spacer()
    }
    .padding()
    .background(Color(uiColor: .systemGroupedBackground))
    .buttonStyle(.bordered)
    .controlSize(.mini)
  }
}

你必须给视图一个背景，否则它会是透明的——但是这个背景（只要它是一种颜色或一种材质）会自动延伸到导航栏本身。这是上述代码的 GIF 动图，我已将背景设置为与分组列表的背景相匹配：

它并不完美，尤其是它看起来与滚动的导航栏不同，但它可能对你有用吗？

【讨论】：

我不知道 safeAreaInset 视图修饰符。虽然我得到了我想要的东西，但使用带有几何阅读器的单节 LazyVStack 在空白背景（大标题）和Material.bar（内嵌标题）之间进行选择，我看到了可以在哪里使用这个解决方案。主要的缺点是附件视图不会随着大标题向下滚动。