swiftui - 如何对齐 View 底部尾随，覆盖在 SwiftUI 中剪辑在屏幕边缘的另一个 View 上？

Question

我有一个由背景图像/动画和前景控制按钮组成的 View 。我想 .overlay 背景顶部的按钮，使其在底部前导、中心和尾随处对齐 - 请参见下面的屏幕截图(不显示实际背景)。

但是，背景必须是动画。我为此使用了 AVPlayer 的包装 View 。播放的视频是纵向的，但它被填充为横向，因此比屏幕更宽。我需要它来填充屏幕的垂直空间。这意味着我必须使用 .frame(maxWidth: .infinity, maxHeight: .infinity).scaledToFill().

这样就可以很好地保持垂直对齐 - 灰色的顶部中心徽章和底部中心按钮呈现在正确的位置 - 但是，它会与水平对齐相混淆。右下角的按钮会自行对齐 w.r.t.视频而不是屏幕，因此对齐到屏幕边界之外(参见第二张图片)。

我需要背景来填充屏幕，并且要正确对齐叠加层。视频是纵向录制的，但 AVPlayer 使它们成为横向并在侧面填充黑色，所以除非可以调整，否则我无法更改视频的纵横比。

对我来说最有益的事情是学习如何对齐组件w.r.t。屏幕，而不是覆盖堆栈中的父级。有没有办法做到这一点？如果没有，是否有解决方法来解决我的问题(使按钮沿水平正确对齐)？

代码

以下代码并非事实来源，只是生成演示。之所以提供它，是因为评论中的一位绅士礼貌地要求它。图像是真相的最终来源。实际代码要大得多，具有随机(并基于应用程序状态)选择 AVPlayer 来播放 mp4 视频的机制。我不认为这应该很重要(封装和东西)，但如果是，请告诉我为什么它会影响注释中的代码结构，我会添加更多细节。

以下演示中使用的函数是:

private func bigBgImage() -> some View {
    self.backgroundChooser.render()
        .resizable()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .scaledToFill()
}

...其中 backgroundChooser.render() 将被视为黑盒。您可以放入一个虚拟的 Image。

所需的布局

此演示是通过 GeometryReader 中的虚拟图像实现的。尽管 bigBgImage 具有 maxWidth: .infinity，但这是一种绑定(bind)叠加层的解决方法。由于 GeometryReader 与动画对齐相混淆，我不想在最终代码中使用它。不过，这里是片段:

GeometryReader { _ in
    self.bigBgImage()
}
    .overlay(alignment: .top) { self.title() }
    .overlay(alignment: .bottom) { self.resetButton() }
    .overlay(alignment: .bottomTrailing) { self.toggleButton() }

不需要的布局

self.bigBgImage()
    .overlay(alignment: .top) { self.title() }
    .overlay(alignment: .bottom) { self.resetButton() }
    .overlay(alignment: .bottomTrailing) { self.toggleButton() }

backgroundChooser 背后的机制过于复杂，无法以有意义的方式包含在 SO 问题中。可以随便放一张图片

Answer 1

在这种情况下，我们应该将控件与内容分开。一种可能的方法是拥有独立的屏幕层(始终绑定(bind)到屏幕几何图形)，然后将内容移动到背景中，并将控件移动到叠加层中，例如

Color.clear    // << always tight to screen area
//.ignoresSafeArea() // << optional, if needed

  .background(self.bigBgImage()) // now independent, but not clipped

  .overlay(alignment: .top) { self.title() }          // << all on screen
  .overlay(alignment: .bottom) { self.resetButton() }
  .overlay(alignment: .bottomTrailing) { self.toggleButton() }