SwiftUI中@Binding包装的Int数组父子视图间数据丢失问题

问题描述 #

我清楚@Binding用于父子视图共享变量且遵循单一数据源原则，但绑定数组时出现异常：子视图对绑定数组的赋值无法同步到父视图，父视图始终看到空数组。

我基于Xcode官方@Binding示例（视频控制器子视图PlayButton切换播放状态，布尔类型@Binding变量isPlaying正常工作）修改代码：子视图接收Episode结构体数组，通过@Binding包装的charactersInShowTitle数组向父视图上报剧集标题字符数。子视图能正常显示标题和对应长度，说明逻辑已执行，但父视图的@State数组sizeOfShowTitles始终元素数为0。

Playground代码分为四部分：

• Episode结构体定义
• PlayButton子视图实现
• PlayerView父视图实现
• PlaygroundPage.current.setLiveView(PlayerView())执行语句

补充细节 #

• 替换append为直接赋值，问题依然存在
• 布尔类型@Binding工作正常，问题仅针对数组类型
• 环境：Swift 5.5、Xcode 13.4.1

问题原因及解决方案 #

核心原因 #

多数情况是子视图修改绑定数组的时机错误，或Playground环境未配置无限执行导致更新被忽略。

具体修复步骤 #

1. 选择正确的时机修改绑定数组
   不要在子视图的init或body闭包中直接修改绑定数组（body会重复调用，且直接修改会触发循环刷新，导致更新失效），应放在onAppear回调或用户交互事件中：

   struct PlayButton: View {
       let episodes: [Episode]
       @Binding var charactersInShowTitle: [Int]
       
       var body: some View {
           VStack {
               ForEach(episodes, id: \.id) { episode in
                   Text("\(episode.title): \(episode.title.count)")
               }
               // 示例：通过按钮点击触发修改
               Button("上报字符数") {
                   charactersInShowTitle = episodes.map { $0.title.count }
               }
           }
           // 或在视图出现时自动上报
           .onAppear {
               charactersInShowTitle = episodes.map { $0.title.count }
           }
       }
   }
   

2. 确认父视图绑定传递正确
   父视图必须传递@State变量的绑定（带$前缀），不能传递数组值：

   struct PlayerView: View {
       @State private var sizeOfShowTitles: [Int] = []
       let episodes = [
           Episode(id: 1, title: "First Episode"),
           Episode(id: 2, title: "Second Episode")
       ]
       
       var body: some View {
           VStack {
               Text("父视图收到的字符数数量：\(sizeOfShowTitles.count)")
               // 正确传递绑定：$sizeOfShowTitles
               PlayButton(episodes: episodes, charactersInShowTitle: $sizeOfShowTitles)
           }
       }
   }
   

3. 配置Playground无限执行
   Playground默认会在代码执行完毕后终止，导致视图更新无法触发，需添加以下语句：

   import PlaygroundSupport
   import SwiftUI
   
   // ... 你的结构体和视图代码 ...
   
   PlaygroundPage.current.setLiveView(PlayerView())
   PlaygroundPage.current.needsIndefiniteExecution = true // 开启无限执行
   

验证要点 #

• 子视图修改绑定数组的代码在onAppear或用户交互事件中执行
• 父视图传递绑定变量时使用$前缀
• Playground已开启无限执行

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