如何让SwiftUI Shape View匹配相邻视图的尺寸

核心修改：调整StatusCapsule的布局约束 #

问题根源是Capsule默认会尽可能扩展垂直空间，未跟随同行文本的高度。只需给Capsule添加高度约束，让它自适应所在HStack的高度（由文本主导）：

struct StatusCapsule: View {
    var color: Color = .white
    var width: CGFloat = 4
    
    var body: some View {
        Capsule()
            .fill(color)
            .frame(width: width, maxHeight: .infinity) // 关键：让高度填充HStack的可用空间
            .alignmentGuide(.center) { $0[.center] } // 确保和文本垂直居中对齐
    }
}

修正第二行的布局对齐 #

第二行的HStack需要明确垂直对齐方式，确保文本和胶囊中心对齐，同时让胶囊高度跟随文本：

ForEach(nums.prefix(5), id: \.self) { num in
    HStack(alignment: .center) { // 添加垂直对齐
        StatusCapsule(color: .red)
        Text("\(num)")
    }
}

关于ScrollView前后布局差异的解释 #

1. 未放入ScrollView时：
   Grid的父视图是NavigationStack，会给Grid分配屏幕固定可用高度。每个GridRow会尽可能填充分配到的垂直空间，此时Capsule无高度限制，会被拉伸到GridRow高度，自然超过文本行高。

2. 放入ScrollView后：
   ScrollView采用「内容优先」的布局逻辑——先计算所有子视图的固有高度，再允许滚动。

   • 第一行单元格跨2列，内部VStack包含多行不同字号文本，HStack高度由文本行高主导，修改后的StatusCapsule会自适应这个高度，表现正常。
   • 第二行单元格是单列，内部VStack用了scaledToFit()，原本的HStack无明确垂直对齐，导致Capsule的固有高度（默认基于自身形状尺寸）超过短文本行高。添加HStack(alignment: .center)后，布局系统会以文本高度为基准，让胶囊适配。

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