SwiftUI布局问题：如何让矩形不超出兄弟视图的尺寸

嘿，这个问题我之前也碰到过！其实完全不用费劲去绑定视图尺寸，有个超简单的办法就能搞定～

你现在的核心需求是让左边的绿色矩形高度自动匹配右边VStack的内容高度，同时支持动态字体变化，不用硬编码数值。最直接的解决方案是给矩形设置frame(maxHeight: .infinity)，让它自动填充所在HStack的高度——而HStack的高度刚好由右边的VStack内容决定（Spacer只会占满剩余宽度，不会影响高度）。

修改后的代码如下：

struct MyView: View {
    var body: some View {
        HStack(spacing: 8) {
            Rectangle()
                .foregroundStyle(Color.green)
                .frame(width: 4, maxHeight: .infinity) // 关键修改：用maxHeight替代固定高度
            
            VStack(alignment: .leading) {
                Text("Title")
                    .bold()
                Text("Subtitle")
            }
            .padding(.vertical, 4)
            
            Spacer()
        }
        .background(Color.gray.opacity(0.1))
    }
}

这样一来，矩形的高度会自动和VStack的高度保持一致，不管字体怎么变化都能适配，还省去了绑定尺寸的麻烦代码。

如果你更喜欢另一种思路，也可以把矩形作为VStack的左侧overlay，效果是一样的：

struct MyView: View {
    var body: some View {
        HStack(spacing: 8) {
            VStack(alignment: .leading) {
                Text("Title")
                    .bold()
                Text("Subtitle")
            }
            .padding(.vertical, 4)
            .overlay(
                Rectangle()
                    .foregroundStyle(Color.green)
                    .frame(width: 4),
                alignment: .leading
            )
            .padding(.leading, 12) // 调整间距让矩形和内容分开
            
            Spacer()
        }
        .background(Color.gray.opacity(0.1))
    }
}

两种方法都能完美解决你的问题，选你觉得顺手的就行～

内容来源于stack exchange