如何将取色器（eyedropper）选取的颜色保存为公共变量？

要让eyedropper选取的颜色能在后续View中使用，核心是把颜色状态提升到多个View都能访问的层级，以下是几种实用方案：

方案1：@Binding传递（父子/跳转View场景） #

如果后续View是当前Upload的子View，或是通过NavigationLink跳转的目标View，用@Binding直接传递状态即可，选色后颜色会自动同步：

struct Upload: View {
    @State private var selectedColor = Color.black
    @State private var showNextView = false
    
    var body: some View {
        VStack {
            HStack(alignment: .center) {
                ColorPicker(
                    "Pick a color", selection: $selectedColor
                ).frame(width: 150, height: 150)
                Spacer()
            }
            
            // 跳转后续View时传递颜色绑定
            NavigationLink(isActive: $showNextView) {
                NextView(selectedColor: $selectedColor)
            } label: {
                Text("进入下一页")
            }
        }
    }
}

// 后续使用颜色的View
struct NextView: View {
    @Binding var selectedColor: Color
    
    var body: some View {
        VStack {
            Text("你选取的颜色：")
            Rectangle()
                .fill(selectedColor)
                .frame(width: 100, height: 100)
        }
    }
}

方案2：ObservableObject全局共享（多View无关联场景） #

如果需要在多个不相关的View中共享颜色，创建一个状态管理类，用@Published标记需要同步的属性：

// 全局状态管理类
class ColorStore: ObservableObject {
    @Published var selectedColor = Color.black
}

// 在App入口注入这个状态对象
struct YourApp: App {
    @StateObject private var colorStore = ColorStore()
    
    var body: some Scene {
        WindowGroup {
            NavigationStack {
                Upload()
                    .environmentObject(colorStore)
            }
        }
    }
}

// 修改Upload View，使用全局状态
struct Upload: View {
    @EnvironmentObject private var colorStore: ColorStore
    
    var body: some View {
        HStack(alignment: .center) {
            ColorPicker(
                "Pick a color", selection: $colorStore.selectedColor
            ).frame(width: 150, height: 150)
            Spacer()
        }
    }
}

// 后续View直接读取全局状态
struct NextView: View {
    @EnvironmentObject private var colorStore: ColorStore
    
    var body: some View {
        Rectangle()
            .fill(colorStore.selectedColor)
            .frame(width: 200, height: 200)
    }
}

方案3：App级@State（极简全局共享） #

如果是小型App，直接在App结构体中声明全局状态，通过绑定传递给各个View：

struct YourApp: App {
    @State private var globalSelectedColor = Color.black
    
    var body: some Scene {
        WindowGroup {
            NavigationStack {
                Upload(selectedColor: $globalSelectedColor)
            }
        }
    }
}

struct Upload: View {
    @Binding var selectedColor: Color
    
    var body: some View {
        HStack(alignment: .center) {
            ColorPicker(
                "Pick a color", selection: $selectedColor
            ).frame(width: 150, height: 150)
            Spacer()
            
            NavigationLink {
                NextView(selectedColor: $selectedColor)
            } label: {
                Text("下一步")
            }
        }
    }
}

关键说明 #

不管用哪种方案，eyedropper选取颜色后，绑定的变量都会自动更新——因为你已经给ColorPicker传入了带$的绑定值，后续View只要访问对应的变量，就能拿到最新的选色结果。

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