我怎样才能让 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 会议 237：使用 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")
        }
    }
}

Answer 2

下面应该创建一个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 错误，还是我遗漏了什么？