如何让 SwiftUI 视图完全填充其超级视图？

Question

以下是假设创建一个Text，其边界占据整个屏幕，但它似乎什么都不做。

struct ContentView: View {
    var body: some View {
        Text("foo")
            .relativeSize(width: 1.0, height: 1.0)
            .background(Color.red)
    }
}

以下破解：

extension View {
    /// Causes the view to fill into its superview.
    public func _fill(alignment: Alignment = .center) -> some View {
        GeometryReader { geometry in
            return self.frame(
                width: geometry.size.width,
                height: geometry.size.height,
                alignment: alignment
            )
        }
    }
}

struct ContentView2: View {
    var body: some View {
        Text("foo")
            ._fill()
            .background(Color.red)
    }
}

但似乎可以工作。

这是relativeSize 的 SwiftUI 错误，还是我遗漏了什么？

Answer 1

您需要观看 WWDC 2019 Session 237: Building Custom Views with SwiftUI，因为 Dave Abrahams 讨论了这个主题，并在他的示例中使用了 Text。

简要重申戴夫详细解释的内容：

1. 父级（在本例中为系统创建并填充屏幕的根视图）向其子级建议尺寸。
2. 孩子可以选择自己的尺码，可以根据自己的意愿消耗尽可能多或尽可能少的建议尺寸。
3. 父级根据各种参数（包括子级选择的大小）将子级定位在父级的坐标空间中。

因此，您不能强制一个小的 Text 填满屏幕，因为在第 2 步中，Text 将拒绝占用超出其内容所需的空间。

Color.red 不同：在第 2 步中，它只是将建议的大小作为自己的大小返回。我们可以将这样的视图称为“可扩展”：它们可以扩展以填充所提供的任何空间。

ZStack 也不同：在第 2 步中，它会询问其子级的尺寸并根据其子级的尺寸选择自己的尺寸。我们可以将这样的视图称为“包裹”：它们紧紧包裹着自己的孩子。

因此，如果您将Color.red 提升为body 返回的“主”视图，并将Text 放在叠加层中，您的ContentView 将表现得像Color.red 并且可以扩展：

struct ContentView: View {
    var body: some View {
        Color.red
            .overlay(Text("foo"))
    }
}

如果您使用包含Color.red 和Text 的ZStack，则ZStack 将包装Color.red，从而具有可扩展性：

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.red
            Text("hello")
        }
    }
}