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

Question

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

而且我希望它能与 GH 移动版那样的大标题样式导航栏一起使用。

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

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

Answer 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)
  }
}

您必须为视图提供背景，否则它将是透明的 – 但该背景（只要它是颜色或 material）会自动延伸到导航栏本身。这是上面代码的 GIF 动图，我在其中设置背景以匹配分组列表的背景：

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

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

Add accessory view below navigation bar title in SwiftUI

uinavigationbar

ios

swift

swiftui

swiftui-navigationview