Swift Charts图例换行后超出视图框架问题求助

针对你遇到的图例换行时第一行超出视图框架的问题，以下是几个无需完全自定义图例的轻量化解决方案，同时保留图例位置切换的灵活性：

方案1：调整图例对齐与容器约束 #

通过chartLegend修饰符修改默认图例的布局对齐方式，让图例从顶部开始排列，避免垂直居中导致的溢出：

import SwiftUI
import Charts

struct DonutView: View {
    var countries:[(country:String, count:Int)] = [
        (country: "Africa", count: 54),
        (country: "Asia", count: 48),
        (country: "Europe", count: 44),
        (country: "North America", count: 23),
        (country: "Oceania", count: 14),
        (country: "South America", count: 12),
    ]
    
    var body: some View {
        Chart {
            ForEach(0..<countries.count, id:\.self) { idx in
                SectorMark(
                    angle: .value(countries[idx].country, countries[idx].count),
                    innerRadius: .ratio(0.5)
                )
                .foregroundStyle(by: .value("label", countries[idx].country))
            }
        }
        .frame(width: 310, height: 270)
        // 修改图例布局
        .chartLegend {
            DefaultChartLegend()
                .frame(maxWidth: .infinity, alignment: .topLeading)
        }
        .chartLegend(position: .top, alignment: .top)
        .border(.blue, width: 1)
    }
}

方案2：添加图例内边距并自适应布局 #

如果方案1效果不足，给图例添加顶部内边距，同时让图表内容自动调整垂直空间：

// 在Chart的修饰符中替换图例相关代码
.chartLegend {
    DefaultChartLegend()
        .padding(.top, 8)
        .frame(maxWidth: .infinity)
}
.chartLegend(position: .top)

方案3：使用流式布局容器（iOS 17+） #

iOS 17及以上版本可以利用flowLayout实现更精准的自动换行控制，同时保留系统图例样式：

// 在Chart的修饰符中替换图例相关代码
.chartLegend {
    DefaultChartLegend()
        .flowLayout(axis: .horizontal, spacing: 12)
        .frame(maxWidth: .infinity)
}

以上方案都无需完全自定义图例项，仅调整布局逻辑，依然支持通过修改chartLegend(position:)的参数（.bottom/.trailing/.leading）切换图例位置，不会大幅增加代码量。

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