SwiftUI View Modifier调用条件？图表X域未随渲染更新问题

问题场景 #

原本将设置图表X域的代码分散在多个Chart视图中时，图表每次渲染都会调用xdomain()方法，同步更新基于当前时间的最近3分钟X域范围。但将这部分逻辑提取为ViewModifier复用后，发现X域仅在首次渲染时设置，后续图表更新时不会重新计算X域。

可正常工作的代码（分散实现） #

struct MyChart: View {
  var body: some View {
      Chart {
        // 图表内容
      }
      .chartXScale(domain: xdomain())
  }

  // 图表每次渲染时都会调用此方法
  func xdomain() -> ClosedRange<Date> {
        let now = Date()
        let lower = now.addingTimeInterval(-180)
        return lower...now
    }
}

无法正常工作的代码（ViewModifier复用） #

struct DomainModifer: ViewModifier {
    func body(content: Content) -> some View {
        content.chartXScale(domain: xdomain())
    }
}

extension View {
    func xdomain() -> some View {
        modifier(DomainModifer())
    }
}

func xdomain() -> ClosedRange<Date> {
    let now = Date()
    let lower = now.addingTimeInterval(-180)
    return lower...now
}

struct MyChart: View {
  var body: some View {
      Chart {
        // 图表内容
      }
      .xdomain() // 仅首次渲染生效，后续不更新
  }
}

问题原因 #

SwiftUI的ViewModifier是值类型，当Modifier本身没有依赖任何可触发视图更新的状态（如@State、@ObservableObject）时，SwiftUI会认为它的body方法不需要重新计算，因此只会在首次渲染时调用一次xdomain()，后续不会主动更新。

而在分散实现的代码中，xdomain()是直接在View的body方法内调用的，body会随着视图的刷新（比如图表数据变化、时间推移）重新执行，因此xdomain()会被反复调用以获取最新的时间范围。

解决方案 #

要让ViewModifier能够动态更新X域，需要给它添加一个可触发刷新的依赖，让SwiftUI知道何时需要重新计算body方法。以下是几种可行的实现方式：

方式一：使用定时器+状态触发更新 #

通过在Modifier内部添加定时器，每隔固定时间更新一个状态变量，强制SwiftUI重新计算body并调用xdomain()：

struct DomainModifier: ViewModifier {
    // 用状态变量触发视图刷新
    @State private var updateTrigger = 0
    
    func body(content: Content) -> some View {
        content
            .chartXScale(domain: xdomain())
            .onAppear {
                // 每隔1秒更新触发值，适配时间变化的需求
                Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
                    updateTrigger += 1
                }
            }
    }
    
    private func xdomain() -> ClosedRange<Date> {
        let now = Date()
        let lower = now.addingTimeInterval(-180)
        return lower...now
    }
}

extension View {
    func xdomain() -> some View {
        modifier(DomainModifier())
    }
}

方式二：使用可观察对象驱动更新 #

创建一个可观察的管理类，定时发送更新通知，让Modifier监听并获取最新的X域范围：

@Observable
class DomainManager {
    var currentDomain: ClosedRange<Date> {
        let now = Date()
        return now.addingTimeInterval(-180)...now
    }
    
    init() {
        // 每隔1秒触发一次更新通知
        Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { [weak self] _ in
            self?.objectWillChange.send()
        }
    }
}

struct DomainModifier: ViewModifier {
    @State private var domainManager = DomainManager()
    
    func body(content: Content) -> some View {
        content
            .chartXScale(domain: domainManager.currentDomain)
    }
}

extension View {
    func xdomain() -> some View {
        modifier(DomainModifier())
    }
}

方式三：绑定外部状态（如果图表有数据更新） #

如果图表的更新是由外部数据变化触发的，可以让Modifier依赖该数据状态，当数据变化时自动重新计算X域：

struct DomainModifier: ViewModifier {
    let data: [ChartData] // 假设ChartData是你的数据模型
    
    func body(content: Content) -> some View {
        content
            .chartXScale(domain: xdomain())
    }
    
    private func xdomain() -> ClosedRange<Date> {
        let now = Date()
        let lower = now.addingTimeInterval(-180)
        return lower...now
    }
}

extension View {
    func xdomain(with data: [ChartData]) -> some View {
        modifier(DomainModifier(data: data))
    }
}

// 使用时
struct MyChart: View {
    @State private var chartData: [ChartData] = []
    
    var body: some View {
        Chart {
            // 基于chartData渲染内容
        }
        .xdomain(with: chartData)
    }
}

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