SwiftUI中.gridCellColumns()引发网格收缩问题求助

在SwiftUI中使用.gridCellColumns()修饰符实现视图跨列合并时，出现整个网格收缩的异常情况。上方蓝色网格布局正常，下方红色网格将原「1 2 3」三个视图合并为单个「4」视图后，整体宽度明显收缩。尝试添加Spacer().frame(height:0)未解决该问题。

示例代码：

var body: some View {
    VStack(alignment: .leading, content: {
        
        HStack {
            Text("Grid Layout Issue")
                .bold()
            Spacer()
        }
        .font(.title)
        .padding(.bottom, 12)

        Grid {
            GridRow {
                HStack {
                    Text("Title A goes here")
                        .lineLimit(1)
                    Spacer()
                }
                Text("1")
                Text("2")
                Text("3")
            }

            GridRow {
                HStack {
                    Text("Title B goes here")
                        .lineLimit(1)
                    Spacer()
                }
                Text("1")
                Text("2")
                Text("3")
            }
        }
        .border(Color.blue)
        
        Grid {
            GridRow {
                HStack {
                    Text("Title A goes here")
                        .lineLimit(1)
                    Spacer()
                }
                Text("1")
                Text("2")
                Text("3")
            }

            GridRow {
                HStack {
                    Text("Title B goes here")
                        .lineLimit(1)
                    Spacer()
                }
                Text("4")
                    .gridCellColumns(3)       // 此处为跨列修改
            }
        }
        .border(Color.red)

        Spacer()
    })
    .padding()
}

效果截图：

解决方案 #

方法1：给跨列视图添加填充约束 #

修改跨列的Text("4")，添加.frame(maxWidth: .infinity)让其填充整个跨列空间，强制列宽保持一致：

Text("4")
    .gridCellColumns(3)
    .frame(maxWidth: .infinity)

方法2：强制Grid占满可用宽度 #

给下方的红色Grid添加.frame(maxWidth: .infinity)，让网格撑满父容器的宽度：

Grid {
    // ... 原有代码
}
.border(Color.red)
.frame(maxWidth: .infinity)

方法3：统一列宽设置 #

使用GridStyle定义固定列宽，确保两个Grid的列宽规则一致：

Grid {
    // ... 原有代码
}
.border(Color.blue)
.gridStyle(.fixedColumnSizes([.flexible(), .flexible(), .flexible(), .flexible()]))

Grid {
    // ... 原有代码
}
.border(Color.red)
.gridStyle(.fixedColumnSizes([.flexible(), .flexible(), .flexible(), .flexible()]))

调试思路 #

• 查看视图约束：SwiftUI的Grid默认根据内容自适应宽度，跨列视图如果没有填充约束，会仅占据自身内容宽度，导致整体列宽收缩
• 对比布局差异：上方网格的三个独立文本视图会撑开列宽，而跨列后的视图需要明确填充规则才能保持原有列宽
• 使用Xcode视图调试工具：通过Debug View Hierarchy查看每个视图的布局边界，定位是哪个视图的约束缺失导致收缩

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