如何防止 Spacer 使 VStack 贪婪地增长到不必要的程度？

Question

我大概有：

var body: some View
{
    HStack(alignment: .top) {

        AvatarView()

        MessageBubble()

        if message.isDeleted != true
        {
            VStack {
                Button(action: {
                    // ...
                }) {
                    Image(systemName: "chevron.down")
                }
                Spacer() // THIS SPACER
                Button(action: {
                    // ...
                }) {
                    Text("????")
                }
            }
        }
    }
}

根HStack~'s height is dictated by the sizeMessageBubblewhich is always taller than itsAvatarViewandVStack` 的兄弟姐妹。

问题是当我在VStack 中添加一个Spacer 时，整个HStack 会难以置信地增长。 Spacer 正在“贪婪”地让一切无限制地增长。 我确实希望在VStack 的最顶部和最底部有一个按钮，同时限制为MessageBubble 的高度。

我怎样才能让它增长不超过MessageBubble？

Answer 1

如果我理解正确，您期望这样（元素对齐）

这是演示代码（彩色矩形的框架在这​​里并不重要，大小仅用于演示，您可以将视图放置在那里）：

struct TestAlignmentSize: View {
    @State var height: CGFloat = 40
    var body: some View {
        HStack(alignment: .top, spacing: 20) {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 50, height: 50)
            Rectangle()
                .fill(Color.red)
                .frame(width: 100, height: 200)
                .alignmentGuide(.top, computeValue: { d in // [!!] 
                    self.height = d.height
                    return d[.top]
                })
            VStack {
                Button(action: {}) {
                    Image(systemName: "chevron.down")
                }
                Spacer()
                Button(action: {}) {
                    Text("Button")
                }
            }.frame(height: self.height) // [!!]
        }
    }
}