SwiftUI/Swift 5中如何在两个视图间传递Int类型数据？

问题根源 #

你遇到的编译报错主要来自三个核心问题：

• personalView里直接用Text(initNum)，SwiftUI的Text组件不支持直接渲染Int类型，必须先转为字符串
• personalView的预览未传入@Binding类型的必填参数，导致预览无法编译
• configView未与personalView建立关联，无法实现变量的双向传递

修正后的完整代码 #

1. PersonalView 修正版 #

import SwiftUI
import Combine

struct PersonalView: View { // SwiftUI视图遵循大驼峰命名规范
    @Binding var initNum: Int
    @Binding var playerNum: Int // 新增playerNum的绑定，方便传递多变量
    
    var body: some View {
        VStack(spacing: 15) { // 用VStack包裹多个Text，避免仅显示最后一个组件
            Text("Personal Settings")
                .font(.system(size: 30))
            Text("初始卡牌数: \(initNum)") // 将Int转为字符串后渲染
            Text("玩家数量: \(playerNum)")
        }
        .padding()
    }
}

struct PersonalView_Previews: PreviewProvider {
    static var previews: some View {
        // 预览时创建临时@State变量，传递给Binding参数
        @State private var testInitNum = 1
        @State private var testPlayerNum = 1
        PersonalView(initNum: $testInitNum, playerNum: $testPlayerNum)
    }
}

2. ConfigView 修正版 #

import SwiftUI
import Combine

struct ConfigView: View { // 大驼峰命名规范
    private enum Field: Int, CaseIterable {
        case initNum, playerNum
    }
    
    @State var playerNum: Int = 1
    @State var initNum: Int = 1

    @FocusState private var focusedField: Field?
    
    // 配置NumberFormatter，确保仅接收整数输入
    private let numberFormatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .none
        formatter.allowsFloats = false
        return formatter
    }()
    
    var body: some View {
        NavigationStack { // 用iOS16+的NavigationStack替代旧版NavigationView
            VStack(spacing: 30) {
                HStack(alignment: .center, spacing: 20) {
                    TextField("S", value: $initNum, formatter: numberFormatter)
                        .padding([.top, .leading, .bottom])
                        .keyboardType(.numberPad)
                        .font(.system(size:40))
                        .frame(width: 60)
                        .border(.gray) // 添加边框方便识别输入框
                        .focused($focusedField, equals: .initNum)
                   
                    Text("Starting Card")
                        .font(.system(size:40))
                }
                
                HStack(alignment: .center, spacing: 20) {
                    TextField("P", value: $playerNum, formatter: numberFormatter)
                        .padding([.top, .leading, .bottom])
                        .keyboardType(.numberPad)
                        .font(.system(size:40))
                        .frame(width: 60)
                        .border(.gray)
                        .focused($focusedField, equals: .playerNum)
                    
                    Text("Players")
                        .font(.system(size:40))
                }
                
                // 添加导航链接，将@State变量通过绑定传递给PersonalView
                NavigationLink("进入个人设置页") {
                    PersonalView(initNum: $initNum, playerNum: $playerNum)
                }
                .font(.system(size: 24))
                .padding()
                .background(.blue)
                .foregroundColor(.white)
                .cornerRadius(10)
            }
            .padding()
            .toolbar {
                ToolbarItem(placement: .keyboard) {
                    Button("Done") {
                        focusedField = nil
                    }
                }
            }
        }
    }
}

struct ConfigView_Previews: PreviewProvider {
    static var previews: some View {
        ConfigView()
    }
}

核心修改说明 #

• 类型转换：通过"\(initNum)"语法将Int转为字符串，满足Text组件的渲染要求
• 预览修复：在预览中创建临时@State变量，通过$语法传递绑定参数
• 双向绑定：利用NavigationLink将ConfigView的@State变量以绑定形式传给PersonalView的@Binding参数，实现变量的双向同步
• 输入校验：配置NumberFormatter限制仅输入整数，避免类型转换异常
• 代码规范：统一使用大驼峰命名视图，提升代码可读性

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