时间戳

首页 > 解决方案 > 如何防止 Spacer 使 VStack 贪婪地增长到不必要的程度？

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

问题描述

我大致有：

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 sizeMessageBubble which is always taller than itsAvatarView andVStack` 同级。

问题是当我在Spacer里面添加一个VStack，然后整个HStack令人难以置信的增长。是“Spacer贪婪”地让一切无限制地增长。我确实希望在最顶部有一个按钮，在最底部有一个按钮，VStack同时限制在MessageBubble's 高度。

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

标签： swiftlayoutswiftui

解决方案

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

子视图对齐

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

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

推荐阅读