SwiftUI跨视图共享@State变量至雷达图数据数组的实现问题

解决方案 #

你当前的场景优先选择调整数据数组的声明方式即可，改动最小就能实现需求，无需引入更复杂的状态管理方案。如果后续有跨页面共享球队数据的需求，再改用Observable封装即可。

快速修复方案（仅改动2行代码）

把ContentView中原来声明为常量的data数组改成计算属性，计算属性会在每次被调用时读取最新的@State变量值，自动实现能力条和雷达图的数据源同步：

// 替换原来的let data定义段
var data: [DataPoint] {
    [
        DataPoint(defence: team1Defence, midfield: team1Midfield, attack: team1Attack, color: mainRed),
        DataPoint(defence: team2Defence, midfield: team2Midfield, attack: team2Attack, color: mainBlue)
    ]
}

修改后雷达图会自动使用能力条的6个状态变量作为数据源，状态变化时两个组件会同步更新。

可选优化方案（适合后续功能扩展）

如果后续需要对球队数据做统一管理、跨页面共享，可以用ObservableObject封装球队模型，避免维护零散的6个状态变量：

1. 先定义球队数据模型

class Team: ObservableObject {
    @Published var defence: Double
    @Published var midfield: Double
    @Published var attack: Double
    let name: String
    let location: String
    let position: String
    let mainColor: Color
    let highlightColor: Color
    
    init(defence: Double, midfield: Double, attack: Double, name: String, location: String, position: String, mainColor: Color, highlightColor: Color) {
        self.defence = defence
        self.midfield = midfield
        self.attack = attack
        self.name = name
        self.location = location
        self.position = position
        self.mainColor = mainColor
        self.highlightColor = highlightColor
    }
}

2. 替换ContentView中原6个状态变量的声明

@StateObject var team1 = Team(
    defence: Double.random(in: 1.0...9.9),
    midfield: Double.random(in: 1.0...9.9),
    attack: Double.random(in: 1.0...9.9),
    name: "Oxford United",
    location: "Home",
    position: "14",
    mainColor: Color(red: 245/255, green: 39/255, blue: 85/255),
    highlightColor: Color(red: 245/255, green: 85/255, blue: 141/255)
)
@StateObject var team2 = Team(
    defence: Double.random(in: 1.0...9.9),
    midfield: Double.random(in: 1.0...9.9),
    attack: Double.random(in: 1.0...9.9),
    name: "Luton Town",
    location: "Away",
    position: "3",
    mainColor: Color(red: 62/255, green: 219/255, blue: 208/255),
    highlightColor: Color(red: 119/255, green: 237/255, blue: 194/255)
)

3. 调整teamWidget的传参

teamWidget(defence: $team1.defence, midfield: $team1.midfield, attack: $team1.attack, color1: team1.highlightColor, color2: team1.mainColor, location: team1.location, teamName: team1.name, position: team1.position)
// 第二个球队同理替换为team2的对应属性

4. 对应调整计算属性data的取值即可。

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