对 .toolbarBackground SwiftUI 使用渐变

Question

我正在尝试为导航 .toolbarBackground 设置自定义渐变，但任何时候我都只使用 LinearGradient 中的第一种颜色运行它。

.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Menu {
            // MARK: 2 Actions
            // 1. logout
            // 2. Delete Account
            Button("Logout",action: logOutUser)
            
            Button("Delete Account",role: .destructive,action: deleteAccount)
        } label: {
            Image(systemName: "slider.horizontal.3")
                .rotationEffect(.init(degrees: 90))
                .tint(.white)
                .scaleEffect(0.8)
        }
    }
}
.navigationBarTitleDisplayMode(.inline)
.navigationTitle("My Garden")
.toolbarColorScheme(.dark, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)
.toolbarBackground(LinearGradient(gradient: Gradient(colors: [Color("Green1"), Color("Green2")]),startPoint: .bottomLeading,endPoint: .topTrailing))

Answer 1

我最近遇到了同样的问题，根据 Sarunw 的博客文章，从 iOS 16 开始这是不可能的：

在当前的测试版中，我们无法使用其他

ShapeStyle

，例如

LinearGradient

。

我已经提交了一份错误报告，一旦我知道它是错误的，我就会更新该帖子 预期的行为或错误。

→ https://sarunw.com/posts/swiftui-navigation-bar-color/#basic-usage

替代解决方案

如果你不想等待 iOS 17 也许解决这个问题，你可以回退到 UIKit 并使用

UINavigationBarAppearance

并使用渐变图像。我想你甚至可以在代码中创建渐变图像，但我只是最终将渐变图像放入资产目录中（默认，不切片）并将其作为

backgroundImage

.

提供给导航栏。

有很多教程都展示了这种方式，例如 this、this 或 this 视频。最后他们都得到了某种形式的代码：

struct MainNavigationBar: ViewModifier {
    init() {
        let appearance = UINavigationBarAppearance()
        
        // Custom gradient background
        appearance.backgroundImage = UIImage(named: "NavigationBarBackground")
        
        // Apply custom styling to all bar states
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
        UINavigationBar.appearance().compactAppearance = appearance
        
        // Custom button color tinting
        // (buggy and not working for me for some reason)
        UINavigationBar.appearance().tintColor = .white
    }
    
    func body(content: Content) -> some View {
        content
    }
}

现在您可以在

NavigationStack

上使用此修饰符将此样式附加到视图和所有子视图。

NavigationStack {
     // Your Content
}
.modifier(MainNavigationBar())

Answer 2

如上所述，我无法使用 SwiftUI 来实现此功能

.toolbarBackground

。

我的解决方案是添加一个覆盖层......

struct MyView: View {
  var body: some View {
    GeometryReader { geo in
      ScrollView {
        VStack {
          Text("Hello")
          Text("World")
        }
      }
      .toolbar(content: toolbarContent)
      .toolbarBackground(.hidden, for: .navigationBar)
      .overlay(alignment: .top) {
        toolbarBackground(height: geo.safeAreaInsets.top)
      }
    }
  }

  @ViewBuilder
  private func toolbarBackground(height: CGFloat) -> some View {
    Rectangle()
      .fill(
        LinearGradient(
          gradient: Gradient(colors: [.black, .clear]),
          startPoint: .top,
          endPoint: .bottom
        )
      )
      .frame(height: height)
      .edgesIgnoringSafeArea(.top)
  }

  @ToolbarContentBuilder
  private func toolbarContent() -> some ToolbarContent {
    // toolbar stuff
  }
}