SwiftUI：能否创建仅返回ChartContent的View组件？

你的错误核心是**LineMark/AreaMark/BarMark属于ChartContent类型，而非View**，所以不能作为View组件的body返回。要实现上层用Chart包裹、子组件仅返回图表元素的需求，只需将组件从View改为遵循ChartContent协议即可。

修改后的组件代码 #

import SwiftUI
import Charts

struct ExerciseChartPlot: ChartContent {
    // Public Variables
    let isLineChart: Bool
    let xLabel: String
    let yLabel: String
    let calendarUnit: Calendar.Component
    let date: Date
    let value: Double
    
    func addToChart(_ chart: inout ChartContentBuilder) {
        if isLineChart {
            chart.add(
                LineMark(x: .value(xLabel, date, unit: calendarUnit), y: .value(yLabel, value))
                    .foregroundStyle(Color._green)
                    .symbol(.circle)
            )
            chart.add(
                AreaMark(x: .value(xLabel, date, unit: calendarUnit), y: .value(yLabel, value))
                    .foregroundStyle(LinearGradient(colors: [._green.opacity(0.2), .clear], startPoint: .top, endPoint: .bottom))
            )
        } else {
            chart.add(
                BarMark(x: .value(xLabel, date, unit: calendarUnit), y: .value(yLabel, value))
                    .foregroundStyle(Color._green.gradient)
            )
        }
    }
}

上层视图使用示例 #

struct ParentChartView: View {
    // 示例数据
    let sampleData: [(date: Date, value: Double)] = [
        (date: Calendar.current.date(byAdding: .day, value: -5, to: Date())!, value: 32),
        (date: Calendar.current.date(byAdding: .day, value: -4, to: Date())!, value: 45),
        (date: Calendar.current.date(byAdding: .day, value: -3, to: Date())!, value: 28),
        (date: Calendar.current.date(byAdding: .day, value: -2, to: Date())!, value: 56),
        (date: Calendar.current.date(byAdding: .day, value: -1, to: Date())!, value: 41)
    ]
    
    var body: some View {
        Chart {
            ForEach(sampleData, id: \.date) { item in
                ExerciseChartPlot(
                    isLineChart: true,
                    xLabel: "日期",
                    yLabel: "数值",
                    calendarUnit: .day,
                    date: item.date,
                    value: item.value
                )
            }
        }
        .frame(height: 300)
        .padding()
    }
}

关键说明 #

• ChartContent协议要求实现addToChart(_:)方法，该方法负责将图表标记添加到图表构建器中
• 组件不再依赖View协议，专注于生成图表所需的ChartContent元素
• 上层的Chart容器负责统一渲染所有子组件提供的图表标记，完全符合你分层抽象的需求

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