SwiftUI 儿童溢出

【问题标题】：SwiftUI Child OverflowSwiftUI 儿童溢出
【发布时间】：2020-09-14 00:22:02
【问题描述】：

在 SwiftUI 中，有没有办法让父视图保持固定大小，即使子视图更大？在下面的示例中，即使您在父项上显式设置帧大小，父项也会增长以适应子项的内容：

import SwiftUI

struct ContentView: View {
  var body: some View {
    ZStack {
      ChildView()
      VStack {
        Text("Parent")
        Spacer()
      }
    }
    .frame(width: 100, height: 100)
    .background(Color.red)
    .border(Color.black)
  }
}

struct ChildView: View {
  var body: some View {
    VStack {
      Text("Child")
    }
    .frame(width: 200, height: 200)
    .background(Color.blue)
  }
}

我希望“父级”文本保持在父级的框架内，但由于子视图更大，它被向上推。

【问题讨论】：

标签： ios swift swiftui

【解决方案1】：

这是因为 SwiftUI 布局的工作方式不同 - 默认情况下，父堆栈适合内容。我们将ZStack 放入其中ChildView 和ZStack 立即变为其大小，然后我们将VStack 放入ZStack 和Spacer 将其扩展为全尺寸，即。 ChildView 的尺寸最大，然后我们应用 .frame，它只是从原始 ZStack 生成请求尺寸的视图，因为它是透明的，默认情况下，我们看到 ZStack 的所有内容。然后我们将边框应用到这个结果视图（但由于同样的透明度原因，仍然可以看到 ZStack 的内容）......等等。

你想要达到的效果是

struct ContentView: View {
  var body: some View {
    ZStack {
      ChildView()
      VStack {
        Text("Parent")
        Spacer()
      }
      .frame(width: 100, height: 100)     // << here !!
      .border(Color.black)
    }
    .background(Color.red)
  }
}

【讨论】：