SwiftUI Chart中AxisMarks与AxisLabels文本动画异常求助

问题原因 #

这种单向的文本截断异常，核心是SwiftUI Chart在动画过程中的布局插值逻辑导致的：

• 当从短文本切换到长文本（比如"days"→"years"、"Data: presence"→"Data: age"）时，轴文本的容器宽度会跟着动画从窄往宽过渡，但长文本在容器宽度还没完全展开时就被渲染，超出容器的部分自动被截断成省略号，直到动画结束容器宽度到位后才显示完整文本。
• 反过来从长文本切换到短文本时，容器宽度从宽收窄，短文本本身就能适配窄容器，所以不会出现截断问题。

解决方案 #

方案1：禁用轴文本的布局动画（无动画直接切换）

给轴上的文本视图单独禁用动画，让文本直接切换，避免布局插值引发的截断。可以通过transaction修改该视图的动画行为：

// AxisMarks 示例
AxisMarks(position: .bottom) { value in
    AxisGridLine()
    AxisTick()
    AxisValueLabel {
        Text(isDisplayingAge ? "\(value) years" : "\(value) days")
            .transaction { $0.animation = nil } // 仅禁用当前文本视图的动画
    }
}

// AxisLabels 示例
Chart {
    // 你的图表数据系列
}
.chartXAxisLabel {
    Text(isDisplayingAge ? "Data: age" : "Data: presence")
        .transaction { $0.animation = nil }
}

方案2：实现淡入淡出平滑切换

如果想要保留过渡动画效果，用ZStack叠加两个文本视图，通过透明度控制显示状态，这样两个文本始终占据最大的布局空间，不会触发容器尺寸的动画变化，自然就不会出现截断：

// AxisMarks 淡入淡出示例
AxisMarks(position: .bottom) { value in
    AxisGridLine()
    AxisTick()
    AxisValueLabel {
        ZStack {
            Text("\(value) years")
                .opacity(isDisplayingAge ? 1 : 0)
            Text("\(value) days")
                .opacity(isDisplayingAge ? 0 : 1)
        }
        .animation(.easeInOut(duration: 0.3), value: isDisplayingAge)
    }
}

// AxisLabels 淡入淡出示例
Chart {
    // 你的图表数据系列
}
.chartXAxisLabel {
    ZStack {
        Text("Data: age")
            .opacity(isDisplayingAge ? 1 : 0)
        Text("Data: presence")
            .opacity(isDisplayingAge ? 0 : 1)
    }
    .animation(.easeInOut(duration: 0.3), value: isDisplayingAge)
}

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