swift - 如何防止 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 size留言区 which is always taller than its头像查看 and VStack` sibling 。

问题是当我添加 Spacer 时内 VStack ，那么整个 HStack难以置信地成长。 Spacer是“贪婪地”让一切都无限制地成长。
我确实希望在 VStack 的最顶部有一个按钮，另一个在最底部。同时限于 MessageBubble的高度。

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

Answer 1

如果我理解正确，你会期待这样的事情(元素对齐)



这是演示代码(彩色矩形的框架在这​​里并不重要，大小仅用于演示，您将在那里放置您的 View ):

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) // [!!]
        }
    }
}