SwiftUI。如何设置 Spacer 的收缩行为？

Question

如果 RGB 视图的容器 (VStack) 与底部黑色视图不冲突，如何设置 RGB 视图之间的默认间距 (100pt)。（如 iPhone 11 Pro Max）。 但是如果没有100p高度的空间就会缩小。（就像屏幕截图中的iPhone SE）

我的代码：

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            VStack(spacing: 0) {
                Rectangle()
                    .foregroundColor(.red)
                    .frame(height: 100)
                Spacer()
                    .frame(minHeight: 10, maxHeight: 100)
                Rectangle()
                    .foregroundColor(.green)
                    .frame(height: 100)
                Spacer()
                    .frame(minHeight: 10, maxHeight: 100)
                Rectangle()
                    .foregroundColor(.blue)
                    .frame(height: 100)
            }
            Spacer()
                .frame(minHeight: 10, maxHeight: 600)
            Rectangle() // keyboard
                .frame(height: 200)
        }
    }
}

所以问题是： maxHeight: 100 的垫片在 iPhone 11 Pro Max 上的高度 = 10（不是 100）。 （但是黑色视图和VStack之间的空间允许）

如何做出我解释的行为？

Answer 1

您需要将

idealHeight

与

.fixedSize

修饰符一起用于

Spacer

s：

Spacer()
    .frame(minHeight: 10, idealHeight: 100, maxHeight: 600)
    .fixedSize()

Answer 2

使用 Spacer(minLength: 10) 作为最后一个垫片。

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            VStack(spacing: 0) {
                Rectangle()
                    .foregroundColor(.red)
                    .frame(height: 100)
                Spacer()
                    .frame(minHeight: 10, maxHeight: 100)
                Rectangle()
                    .foregroundColor(.green)
                    .frame(height: 100)
                Spacer()
                    .frame(minHeight: 10, maxHeight: 100)
                Rectangle()
                    .foregroundColor(.blue)
                    .frame(height: 100)
            }
            Spacer(minLength: 10)
            Rectangle() // keyboard
                .frame(height: 200)
        }
    }
}

代码中的问题是，当您将 Spacer 包装在像

Spacer().frame(minHeight: 10, maxHeight: 600)

这样的框架内时，它首先被视为框架，然后是该框架内的 Spacer。框架与其他视图具有相同的默认布局优先级。因此，父级将建议它与内部 VStack 具有相同数量的空间。通过删除框架修改器，间隔器具有最低的布局优先级，因此内部 VStack 将占用尽可能多的空间，除了间隔器占用的最小 10 点和矩形的 200 点之外。

Answer 3

我遇到了类似的问题...

这为我解决了这个问题：

Spacer().frame(minWidth: 0)

Answer 4

简单地做

Spacer(minLength: 0)

为我解决了这个问题！

注意：使用

  Spacer()
    .frame(minHeight: 10, idealHeight: 100, maxHeight: 600)
    .fixedSize()

当您希望垫片膨胀和收缩时，不能正常工作。