SwiftUI运行时动态添加不同位置Rectangle的问题求助

一、报错原因 #

• @State private var offset: CGPoint未初始化：SwiftUI要求@State属性必须在声明时赋予初始值，否则会触发编译错误。
• 逻辑设计错误：所有通过ForEach生成的Rectangle共用同一个offset，无法实现「不同位置放置矩形」的需求，最终所有矩形会堆叠在同一位置。

二、最优实现方案 #

核心思路是用数据驱动视图：让每个矩形的位置、点击状态、显示文本作为独立数据存储，通过ViewModel管理数据集合，实现动态添加和交互逻辑。

完整代码示例 #

// 单个矩形的数据模型，包含位置、点击状态、显示文本
struct ColumnModel: Identifiable {
    let id = UUID()
    var position: CGPoint
    var isTapped = false
    var displayText: String = ""
}

// 管理所有矩形数据的ViewModel
class ViewModel: ObservableObject {
    @Published var columnsArray: [ColumnModel] = []
    
    // 向指定位置添加矩形的方法
    func addColumn(at position: CGPoint, initialText: String = "") {
        let newColumn = ColumnModel(position: position, displayText: initialText)
        columnsArray.append(newColumn)
    }
    
    // 更新矩形的点击状态与显示文本
    func updateColumn(_ column: ColumnModel, newText: String) {
        guard let index = columnsArray.firstIndex(where: { $0.id == column.id }) else { return }
        columnsArray[index].isTapped = true
        columnsArray[index].displayText = newText
    }
}

struct Columns: View {
    @ObservedObject private var viewModel = ViewModel()
    
    var body: some View {
        ZStack {
            // 绑定数组元素，直接修改模型状态
            ForEach($viewModel.columnsArray) { $column in
                Rectangle()
                    .fill(Color.black)
                    .frame(width: 20, height: 20)
                    // 每个矩形使用自身模型的位置作为偏移量
                    .offset(x: column.position.x, y: column.position.y)
                    // 点击后叠加显示文本
                    .overlay(
                        Text(column.isTapped ? column.displayText : "")
                            .foregroundColor(.white)
                            .font(.caption)
                    )
                    .onTapGesture {
                        // 自定义点击后的文本内容，也可扩展为用户输入逻辑
                        viewModel.updateColumn(column, newText: "已点击")
                    }
            }
        }
        .frame(width: 300, height: 300, alignment: .center)
        .onAppear {
            // 测试：运行时添加几个不同位置的矩形
            viewModel.addColumn(at: CGPoint(x: -80, y: -80))
            viewModel.addColumn(at: CGPoint(x: 80, y: 80))
            viewModel.addColumn(at: CGPoint(x: 0, y: 0))
        }
    }
}

关键说明 #

• 动态位置控制：调用viewModel.addColumn(at:)方法，传入目标CGPoint即可在任意位置添加矩形，完全支持运行时动态添加。
• 独立状态管理：每个矩形的位置、交互状态都存储在对应ColumnModel中，避免共用状态导致的逻辑混乱。
• 自动视图更新：ViewModel的columnsArray用@Published修饰，数据变化时视图会自动刷新，无需手动处理UI更新。

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