SwiftUI实现单个用户Follow按钮独立切换状态的问题

问题根源 #

1. 你用单个@State变量控制所有按钮状态，这个变量是全局共享的，所以点击任何按钮都会让所有按钮同步切换。
2. 直接修改循环里的user.isFollowingUser失败，是因为循环遍历普通数组时，拿到的user是不可修改的副本（默认是let常量），就算改成var，修改的也只是临时副本，不会影响原数组里的数据。

正确解决方案 #

不需要单独创建3个按钮，通过绑定数组+可修改的用户模型就能实现单个按钮独立切换状态，步骤如下：

1. 定义可修改的用户模型
   确保用户结构体里的isFollowingUser是可变属性，并且遵循Identifiable协议（方便ForEach遍历）：

   struct User: Identifiable {
       let id = UUID()
       let name: String
       var isFollowingUser: Bool // 用var定义可变状态
   }
   

2. 使用绑定数组遍历
   用@State（或ViewModel里的@Published）定义用户数组，在ForEach中通过$users拿到每个用户的绑定对象，这样就能直接修改原数组里的用户状态：

   struct FollowUserView: View {
       @State private var users: [User] = [
           User(name: "用户A", isFollowingUser: false),
           User(name: "用户B", isFollowingUser: false),
           User(name: "用户C", isFollowingUser: false)
       ]
       
       var body: some View {
           List {
               ForEach($users) { $user in // $user是绑定对象，可直接修改
                   HStack {
                       Text(user.name)
                       Spacer()
                       Button {
                           // 直接切换当前绑定用户的状态
                           user.isFollowingUser.toggle()
                       } label: {
                           // 根据当前用户的状态动态显示文本和颜色
                           Text(user.isFollowingUser ? "Following" : "Follow")
                               .padding(.horizontal, 16)
                               .padding(.vertical, 8)
                               .background(user.isFollowingUser ? Color.blue : Color.gray)
                               .foregroundColor(.white)
                               .cornerRadius(8)
                       }
                   }
               }
           }
       }
   }
   

为什么这样可行 #

• $users传递的是数组的绑定，ForEach里的$user是单个用户的绑定对象，修改user.isFollowingUser会直接同步到原数组的对应元素。
• 每个按钮的状态都绑定到对应用户的isFollowingUser属性，互相独立，不会出现点击一个全变的情况。

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