SwiftUI图像填充与按钮布局

在SwiftUI中，我们常常需要将图像填充整个屏幕，同时在图像上叠加其他UI元素，例如按钮。今天我们来探讨如何在保持图像充满屏幕的同时，确保底部按钮的可见性。

背景

考虑一个场景：我们有一个从URL获取的图片，并希望它填满整个屏幕，同时在图片的底部有一排按钮。我们使用AsyncImage来异步加载图片，并使用ZStack来实现这个布局。然而，当我们设置AsyncImage的contentMode为.fill时，底部的按钮会消失。将contentMode改为.fit虽然能显示按钮，但图片不再填满屏幕。

问题分析

这个问题出现的原因是，当AsyncImage的contentMode设置为.fill时，图片会溢出屏幕边界，导致ZStack的宽度超出屏幕，从而覆盖了底部的按钮。

解决方案

方法一：适用于iOS 17及以上

在iOS 17中，我们可以使用containerRelativeFrame修饰符来限制AsyncImage的宽度，使其不会溢出屏幕：