SwiftUI视图缩放时黑色方块消失问题求助

问题现象 #

ContentView嵌套Squares视图，点击按钮可生成黑色方块；点击父视图触发缩放（放大）操作时，黑色方块会消失。单个视图使用时缩放正常，嵌套后出现该问题，需求是父视图缩放时所有子视图正常显示。

问题原因 #

• 数据模型错误使用@State：ColumnsModelMain是数据结构体，却给属性添加了@State包装器。@State仅用于SwiftUI视图内部的状态管理，在数据模型中使用会导致状态追踪混乱，视图无法正确响应数据变化。
• 视图布局范围不匹配：Squares里的ZStack尺寸是200x200，但生成方块时的随机position范围是1-400，超出了ZStack的可视区域，缩放后这个问题被放大，导致方块完全移出可视范围。

修复方案 #

• 移除ColumnsModelMain中所有属性的@State包装器，数据模型仅负责存储数据，不需要状态包装。
• 调整随机position的生成范围，使其落在ZStack的可视区域内（比如x和y范围设为10到190，适配20x20的方块中心定位）。

完整修复代码 #

import SwiftUI
import Combine

enum ColumnTypes {
    case Square, Circular
}

final class ColumnsArrayObservedMain: ObservableObject {
    @Published var columnsArray: [ColumnsModelMain] = []
    @Published var randomPosition: CGPoint = CGPoint(x: 0, y: 0)
}

struct ColumnsModelMain: Identifiable {
    let id = UUID()
    var columnWidth: Int
    var columnLength: Int
    var columnHeight: Int
    var columnType: ColumnTypes
    var columnPosition: CGPoint
}

struct ContentView: View {
    @State var scaleby = 2.0
    @State var scalingEnabled = true
    
    var body: some View {
        VStack(alignment: .center) {
            Squares()
        }
        .scaleEffect(scaleby)
        .onTapGesture {
            if scalingEnabled {
                withAnimation { scaleby *= 2 }
            }
        }
        .frame(width: 400, height: 400)
    }
}

struct Squares: View {
    @ObservedObject private var columnsArrayObservedObjectLocal = ColumnsArrayObservedMain()
    @State private var recColour: Color = .black
    @State private var dragAmount: CGPoint?
    
    var body: some View {
        VStack {
            ZStack {
                ForEach(columnsArrayObservedObjectLocal.columnsArray) { column in
                    Rectangle()
                        .fill(Color.black)
                        .frame(width: 20, height: 20)
                        .position(column.columnPosition)
                }
            }
            .frame(width: 200, height: 200, alignment: .center)
            
            Button("Append last") {
                // 生成在ZStack可视范围内的随机位置
                let randomX = CGFloat.random(in: 10...190)
                let randomY = CGFloat.random(in: 10...190)
                columnsArrayObservedObjectLocal.randomPosition = CGPoint(x: randomX, y: randomY)
                
                columnsArrayObservedObjectLocal.columnsArray.append(
                    ColumnsModelMain(
                        columnWidth: 10,
                        columnLength: 100,
                        columnHeight: 10,
                        columnType: .Square,
                        columnPosition: columnsArrayObservedObjectLocal.randomPosition
                    )
                )
            }
        }
    }
}

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