SwiftUI中.toolbarBackground设置渐变仅显示首色的问题

问题根源 #

直接将LinearGradient传入.toolbarBackground时，渐变视图未被正确拉伸填充整个导航栏空间，导致仅渲染起始颜色；同时需确认自定义颜色是否在Assets中正确配置。

修复方案 #

方案1：强制渐变填充导航栏全区域

给LinearGradient添加.frame(maxWidth: .infinity, maxHeight: .infinity)修饰符，确保它填满导航栏的全部可用空间：

.toolbar {
    ToolbarItem(placement: .navigationBarTrailing) {
        Menu {
            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)
        .frame(maxWidth: .infinity, maxHeight: .infinity),
    for: .navigationBar
)

方案2：透明导航栏+独立背景层

若方案1不生效，可将导航栏设为透明，在视图底层添加渐变背景模拟导航栏效果：

ZStack {
    // 覆盖顶部安全区的渐变背景
    LinearGradient(gradient: Gradient(colors: [Color("Green1"), Color("Green2")]), startPoint: .bottomLeading, endPoint: .topTrailing)
        .ignoresSafeArea(edges: .top)
    
    // 页面主体内容
    ScrollView {
        // 你的业务内容
    }
}
.navigationBarTitleDisplayMode(.inline)
.navigationTitle("My Garden")
.toolbarColorScheme(.dark, for: .navigationBar)
.toolbarBackground(.hidden, for: .navigationBar)

额外排查项 #

• 确认Green1和Green2已正确添加到项目Assets目录，拼写无错误；
• 若适配iOS 16以下版本，.toolbarBackground部分API存在兼容性限制，需调整实现逻辑。

内容的提问来源于stack exchange，提问作者PoonDopolis