SwiftUI中如何将操作传递至内部视图？

问题背景 #

在SwiftUI开发中，当视图持有内部状态时，经常遇到需要从外部父视图修改该状态或调用内部方法的场景，但SwiftUI的视图是值类型，无法直接引用实例并调用方法。比如下面的示例：

示例场景：分数重置 #

基础视图ScoreView持有内部分数状态，提供reset()方法，但父视图ScoreBoardView无法直接调用该方法：

struct ScoreView: View {
    @State private var currentValue = 10
    var onDone: () -> Void
    
    var body: some View {
        Button("\(currentValue)", action: onPress)
    }
    
    private func onPress() {
        currentValue -= 1
        if currentValue == 0 {
            onDone()
        }
    }
    
    func reset() {
        currentValue = 10
    }
}

struct ScoreBoardView: View {
    @State private var isDone: Bool = false
    
    var body: some View {
        VStack {
            HStack {
                ScoreView(onDone: { isDone = true })
                ScoreView(onDone: { isDone = true })
            }
            Button("Reset", action: resetScores)
                .disabled(!isDone)
        }
    }
    
    private func resetScores() {
        isDone = false
        // 无法直接调用内部视图的reset()方法
        // leftScoreView.reset()
        // rightScoreView.reset()
    }
}

类似的场景还包括：

• 重置视图内部状态
• 控制滚动视图滚动到指定位置
• 触发撤销操作
• 点击外部区域折叠菜单

现有方案的痛点 #

1. Binding强制外部管理状态 #

将内部状态改为@Binding，让父视图持有并管理状态，但会强制所有使用ScoreView的场景都必须传入Binding，即便不需要外部控制；同时无法实现内部默认状态与外部Binding的兼容初始化。

2. 引入重量级视图模型（ViewModel） #

为简单视图单独创建ViewModel会增加冗余代码，复杂视图若已有ViewModel，为了暴露部分方法而公开整个ViewModel会破坏封装性，甚至需要拆分多个ViewModel，增加维护成本。

推荐解决方案 #

方案1：轻量状态容器（ViewModel） #

为视图创建轻量的ViewModel，既保留内部默认状态，又允许外部传入自定义ViewModel实现控制，兼顾封装性和灵活性。

修改后的ScoreView与ViewModel：

class ScoreViewModel: ObservableObject {
    @Published var currentValue = 10
    
    func reset() {
        currentValue = 10
    }
    
    func onPress() -> Bool {
        currentValue -= 1
        return currentValue == 0
    }
}

struct ScoreView: View {
    @StateObject private var viewModel: ScoreViewModel
    var onDone: () -> Void
    
    // 默认使用内部ViewModel，无需外部控制时直接调用此初始化方法
    init(onDone: @escaping () -> Void) {
        self._viewModel = StateObject(wrappedValue: ScoreViewModel())
        self.onDone = onDone
    }
    
    // 需要外部控制时，传入自定义ViewModel
    init(viewModel: ScoreViewModel, onDone: @escaping () -> Void) {
        self._viewModel = StateObject(wrappedValue: viewModel)
        self.onDone = onDone
    }
    
    var body: some View {
        Button("\(viewModel.currentValue)", action: onPress)
    }
    
    private func onPress() {
        if viewModel.onPress() {
            onDone()
        }
    }
}

ScoreBoardView的用法：

struct ScoreBoardView: View {
    @State private var isDone: Bool = false
    @StateObject private var leftScoreVM = ScoreViewModel()
    @StateObject private var rightScoreVM = ScoreViewModel()
    
    var body: some View {
        VStack {
            HStack {
                ScoreView(viewModel: leftScoreVM, onDone: { isDone = true })
                ScoreView(viewModel: rightScoreVM, onDone: { isDone = true })
            }
            Button("Reset", action: resetScores)
                .disabled(!isDone)
        }
    }
    
    private func resetScores() {
        isDone = false
        leftScoreVM.reset()
        rightScoreVM.reset()
    }
}

方案2：Binding传递动作信号 #

对于仅需触发动作（如滚动、折叠）的场景，无需暴露内部状态，通过Binding传递信号，内部视图监听信号并执行对应逻辑。

示例：搜索滚动场景

修改ElementView，通过Binding接收滚动目标索引，内部监听并执行滚动：

struct ElementView: View {
    let horizontalItems: [String]
    let verticalItems: [String]
    @Binding var scrollToHorizontalIndex: Int?
    @Binding var scrollToVerticalIndex: Int?
    
    var body: some View {
        VStack {
            headerView().frame(height: 50)
            listView()
        }
        .onChange(of: scrollToHorizontalIndex) { index in
            guard let index = index else { return }
            withAnimation {
                horizontalScrollProxy?.scrollTo(index, anchor: .leading)
            }
            scrollToHorizontalIndex = nil // 重置信号，避免重复触发
        }
        .onChange(of: scrollToVerticalIndex) { index in
            guard let index = index else { return }
            withAnimation {
                verticalScrollProxy?.scrollTo(index, anchor: .top)
            }
            scrollToVerticalIndex = nil
        }
    }
    
    @State private var horizontalScrollProxy: ScrollViewProxy?
    @State private var verticalScrollProxy: ScrollViewProxy?
    
    private func headerView() -> some View {
        GeometryReader { proxy in
            ScrollViewReader { scrollProxy in
                ScrollView(.horizontal) {
                    HStack {
                        ForEach(horizontalItems.indices, id: \.self) { index in
                            Text(horizontalItems[index])
                                .id(index) // 设置元素ID，用于滚动定位
                        }
                    }.frame(height: proxy.size.height)
                }
                .onAppear {
                    horizontalScrollProxy = scrollProxy
                }
            }
            .frame(width: proxy.size.width, height: proxy.size.height)
        }
    }
    
    private func listView() -> some View {
        GeometryReader { proxy in
            ScrollViewReader { scrollProxy in
                ScrollView {
                    VStack {
                        ForEach(verticalItems.indices, id: \.self) { index in
                            Text(verticalItems[index])
                                .id(index)
                        }
                    }.frame(width: proxy.size.width)
                }
                .onAppear {
                    verticalScrollProxy = scrollProxy
                }
            }
            .frame(width: proxy.size.width, height: proxy.size.height)
        }
    }
}

SearchableView的用法：

struct SearchableView: View {
    @State var horizontalItems: [String] = (0..<100).map { "Horizontal \($0)" }
    @State var verticalItems: [String] = (0..<100).map { "Vertical \($0)" }
    @State private var searchText: String = ""
    @State private var scrollToHorizontalIndex: Int?
    @State private var scrollToVerticalIndex: Int?
    
    var body: some View {
        VStack {
            TextField("Search", text: $searchText)
            ElementView(horizontalItems: horizontalItems,
                        verticalItems: verticalItems,
                        scrollToHorizontalIndex: $scrollToHorizontalIndex,
                        scrollToVerticalIndex: $scrollToVerticalIndex)
        }
        .onChange(of: searchText) { newValue in
            guard !newValue.isEmpty else {
                scrollToHorizontalIndex = nil
                scrollToVerticalIndex = nil
                return
            }
            if let index = horizontalItems.firstIndex(where: { $0.hasPrefix(newValue) }) {
                scrollToHorizontalIndex = index
            }
            if let index = verticalItems.firstIndex(where: { $0.hasPrefix(newValue) }) {
                scrollToVerticalIndex = index
            }
        }
    }
}

方案3：EnvironmentObject实现全局控制 #

对于跨多层视图的控制场景（类似UIKit中层级调用reset），通过EnvironmentObject传递全局控制对象，子视图监听信号并响应，无需逐层传递引用。

定义全局控制对象：

class AppController: ObservableObject {
    @Published var shouldResetAll = false
    
    func triggerReset() {
        shouldResetAll = true
        // 延迟重置信号，避免重复触发
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            self.shouldResetAll = false
        }
    }
}

顶层视图注入控制对象：

struct TopLevelView: View {
    @StateObject private var appController = AppController()
    
    var body: some View {
        VStack {
            MidLevelView()
            Button("Reset All") {
                appController.triggerReset()
            }
        }
        .environmentObject(appController)
    }
}

子视图监听并响应信号：

struct MidLevelView: View {
    @EnvironmentObject private var appController: AppController
    @StateObject private var leftVM = InnerViewModel()
    @StateObject private var rightVM = InnerViewModel()
    
    var body: some View {
        HStack {
            InnerView(viewModel: leftVM)
            InnerView(viewModel: rightVM)
        }
        .onChange(of: appController.shouldResetAll) { shouldReset in
            if shouldReset {
                leftVM.reset(animated: true)
                rightVM.reset(animated: false)
            }
        }
    }
}

class InnerViewModel: ObservableObject {
    @Published var data = Array(1...3)
    
    func reset(animated: Bool) {
        data = Array(1...10)
    }
}

struct InnerView: View {
    @ObservedObject var viewModel: InnerViewModel
    @State private var scrollProxy: ScrollViewProxy?
    
    var body: some View {
        ScrollViewReader { proxy in
            List(viewModel.data, id: \.self) { item in
                Text("\(item)")
                    .id(item)
            }
            .onAppear {
                scrollProxy = proxy
            }
            .onChange(of: viewModel.data) { _ in
                withAnimation {
                    scrollProxy?.scrollTo(1, anchor: .top)
                }
            }
        }
    }
}

总结 #

• 轻量ViewModel：适合需要外部控制内部状态的场景，兼顾封装性与灵活性；
• Binding信号传递：适合仅需触发动作的场景，避免暴露内部视图引用；
• EnvironmentObject：适合跨多层视图的全局控制，简化层级间的信号传递。

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