SwiftUI中如何实现背景图填充适配且不影响文本换行？

出现这个问题的核心原因是：使用.aspectRatio(contentMode: .fill)的图片会超出屏幕范围，导致ZStack的布局被图片撑开，内部的VStack和Text没有受到屏幕宽度的约束，因此文本不会自动换行。

以下是几种可行的解决方法：

方法一：给VStack添加宽度约束 #

给VStack设置frame(maxWidth: .infinity)，让它的宽度适配父容器（屏幕），这样Text就会在屏幕宽度范围内自动换行：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("backgroundimage")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            
            VStack {
                Text("Some really long text. Some really long text. Some really long text.")
            }
            .frame(maxWidth: .infinity) // 添加宽度约束
        }
    }
}

#Preview {
    ContentView()
}

方法二：直接给Text设置宽度约束 #

如果只需要限制Text的宽度，可以直接给Text添加frame(maxWidth: .infinity)，同时可指定对齐方式：

Text("Some really long text. Some really long text. Some really long text.")
    .frame(maxWidth: .infinity, alignment: .leading)

方法三：约束ZStack的尺寸 #

强制ZStack适配屏幕大小，这样图片的.fill模式会填充整个屏幕，内部视图也会受限于屏幕范围：

ZStack {
    Image("backgroundimage")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .edgesIgnoringSafeArea(.all)
    
    VStack {
        Text("Some really long text. Some really long text. Some really long text.")
    }
}
.frame(maxWidth: .infinity, maxHeight: .infinity) // 约束ZStack尺寸

这些方法都能在保持图片填充比例的同时，让文本正常换行。

内容的提问来源于stack exchange，提问作者mpc75