SwiftUI Grid如何设置可变GridRow高度？行间横线异常问题

问题分析 #

你当前的代码中，虽然给承载红线的GridRow添加了gridCellUnsizedAxes(.vertical)，但内部的GeometryReader会自动扩展以占据可用空间，导致该行仍有多余高度，无法实现细线紧贴上下行的效果。

解决方案 #

有两种更简洁的实现方式：

方案一：直接给目标行添加底部边框（推荐）

不需要单独用GridRow放置分隔线，直接给第一行的底部添加1像素边框，自动贴合行边缘：

import SwiftUI

struct ContentView: View {
    var body: some View {
        Grid {
            GridRow {
                Text("Column 1")
                Text("Column 2")
            }
            .border(Color.red, edge: .bottom) // 仅给行底部添加红色边框
            
            GridRow {
                Text("Row 1 value 1")
                Text("Row 1 value 2")
            }
            
            GridRow {
                Text("Row 2 value 1")
                Text("Row 2 value 2")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

方案二：优化独立分隔行的实现

如果必须用单独的GridRow承载细线，用Color直接生成固定高度的线条，配合gridCellUnsizedAxes(.vertical)让行高度完全匹配线条高度：

import SwiftUI

struct ContentView: View {
    var body: some View {
        Grid {
            GridRow {
                Text("Column 1")
                Text("Column 2")
            }
            
            GridRow {
                Color.red.frame(height: 1) // 直接创建1像素高度的红色线条
            }
            .gridCellColumns(2) // 跨两列
            .gridCellUnsizedAxes(.vertical) // 让行仅占用内容高度
            
            GridRow {
                Text("Row 1 value 1")
                Text("Row 1 value 2")
            }
            
            GridRow {
                Text("Row 2 value 1")
                Text("Row 2 value 2")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

说明 #

• 方案一利用SwiftUI内置的border(edge:)方法，无需额外布局元素，代码更简洁，且线条自动对齐行边缘。
• 方案二中，Color.frame(height:1)明确限制了内容高度，gridCellUnsizedAxes(.vertical)告诉Grid不要给该行分配额外垂直空间，最终实现细线仅占1像素高度并紧贴上下行的效果。

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