SwiftUI中ScrollView设置图片背景异常问题求助

问题2：为什么图片背景会延伸至界面最底部？ #

Color作为背景时，SwiftUI会自动将其尺寸约束到宿主视图（即ScrollView的布局边界）；而Image默认以自身原始尺寸渲染，且background修饰符作用于ScrollView时，若ScrollView未明确设置高度约束，Image会尽可能填充所有可用空间——再加上VStack默认按内容分配空间，最终导致图片溢出到TextField和安全区域。

问题1：正确设置ScrollView图片背景的方法 #

需要给Image添加尺寸约束，让它严格匹配ScrollView的布局范围：

import SwiftUI

struct ContentView: View {
    @State var text: String = ""

    var body: some View {
        VStack {
            ScrollView() {
                LazyVStack {
                    ForEach(1..<201, id: \.self) { num in
                        Text("Message \(num)")
                    }
                }
            }
            .frame(maxHeight: .infinity) // 让ScrollView占据VStack剩余空间
            .background(
                Image("chatBackground")
                    .resizable() // 允许图片缩放
                    .scaledToFill() // 按比例填充ScrollView
                    .frame(maxWidth: .infinity, maxHeight: .infinity) // 匹配ScrollView尺寸
                    .clipped() // 裁剪超出ScrollView的部分
            )
            
            TextField("Your text here", text: $text)
                .textFieldStyle(.roundedBorder)
                .padding()
        }
        .navigationBarTitleDisplayMode(.inline)
        .navigationTitle("Example app")
    }
}

解决键盘弹出时背景移位的问题 #

上述方案在键盘弹出时，ScrollView的高度动态变化会导致背景图片移位，可通过将背景图片嵌入ScrollView的内容层，并使用GeometryReader匹配滚动区域尺寸来解决：

import SwiftUI

struct ContentView: View {
    @State var text: String = ""

    var body: some View {
        VStack {
            ScrollView() {
                GeometryReader { geo in
                    ZStack {
                        Image("chatBackground")
                            .resizable()
                            .scaledToFill()
                            .frame(width: geo.size.width, height: geo.size.height)
                            .clipped()
                        
                        LazyVStack {
                            ForEach(1..<201, id: \.self) { num in
                                Text("Message \(num)")
                            }
                        }
                    }
                }
            }
            .frame(maxHeight: .infinity)
            
            TextField("Your text here", text: $text)
                .textFieldStyle(.roundedBorder)
                .padding()
        }
        .navigationBarTitleDisplayMode(.inline)
        .navigationTitle("Example app")
    }
}

这样背景图片会跟随ScrollView的滚动区域尺寸动态调整，键盘弹出时不会出现移位。

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