如何为SwiftUI工具栏按钮设置线性渐变背景？

你需要去掉全局设置导航栏背景的代码，转而给每个ToolbarItem里的具体视图单独添加渐变背景，以下是修改后的完整代码：

import SwiftUI

struct InitialPageView: View {
    // 抽离渐变，避免重复代码
    private let gradient = LinearGradient(
        colors: [Color("IPU_secondary"), Color("IPU_principal")],
        startPoint: .topLeading,
        endPoint: .bottomTrailing
    )
    
    var body: some View {
        NavigationView {
            VStack {
                Button {
                    print("")
                } label: {
                    Text("OI")
                }
                .padding(30)
                .background(gradient)
            }
            // 移除全局导航栏背景设置的代码
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    HStack(spacing: 6) {
                        Image(systemName: "location.circle")
                        Text("Localização aqui")
                    }
                    .foregroundColor(.white) // 设置文字/图标颜色，适配渐变背景
                    .padding(.horizontal, 12)
                    .padding(.vertical, 8)
                    .background(gradient)
                    .cornerRadius(8) // 可选：添加圆角让按钮更美观
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Image(systemName: "chevron.down")
                        .foregroundColor(.white)
                        .padding(10)
                        .background(gradient)
                        .cornerRadius(8)
                }
            }
        }
    }
}

关键修改说明： #

1. 抽离渐变定义：把渐变单独定义为属性，避免重复写相同的渐变代码，方便后续修改维护。
2. 移除全局导航栏背景：删掉.toolbarBackground相关的两行代码，不再给整个导航栏设置背景。
3. 给工具栏元素加渐变：
   • 对导航栏左侧的HStack和右侧的Image分别添加.background(gradient)
   • 添加padding控制渐变背景的大小，让元素有合适的点击区域
   • 设置.foregroundColor(.white)确保文字和图标在渐变背景上清晰可见
   • 可选添加.cornerRadius让渐变背景呈现圆角效果，更符合按钮的视觉样式

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