SwiftUI Image的AspectFit比例适配屏幕宽度异常问题求助

问题场景 #

需要实现：Image宽度与屏幕一致并保持AspectFit比例，剩余屏幕高度显示Text。但当Text高度触达视图底部时，Image左右出现意外空白，在TabBar中该问题更明显。尝试过GeometryReader分配区域、Image搭配ScrollView/List等组合，均未解决。

原代码 #

struct ContentView: View {
        var body: some View {
            VStack(spacing: 0) {
                        Image("tickimg")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(minWidth: UIScreen.main.bounds.size.width)
                            .background(Color.blue)
                            .border(Color.yellow)
                        Text("HelloWorld\n\n\n\n\n\n\n\n\n\n\n\n\\n\n\n\n\n\n\n\n\nn\n\n\n").background(Color.red)
        }
    }
}

解决方案 #

核心思路是强制Image宽度与父视图一致，同时让Text在剩余空间内可滚动，避免内容过多时挤压Image的尺寸。修改后的代码如下：

struct ContentView: View {
    var body: some View {
        GeometryReader { geo in
            VStack(spacing: 0) {
                // 强制Image宽度为父视图宽度，AspectFit保证比例
                Image("tickimg")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: geo.size.width)
                    .background(Color.blue)
                    .border(Color.yellow)
                
                // 用ScrollView包裹Text，内容过多时滚动，不挤压Image
                ScrollView {
                    Text("HelloWorld\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n")
                        .background(Color.red)
                }
            }
        }
        // 根据需求忽略安全区，适配TabBar等场景
        .edgesIgnoringSafeArea(.bottom)
    }
}

原理说明 #

原代码中minWidth: UIScreen.main.bounds.size.width仅设置了Image的最小宽度，当VStack总高度超过屏幕时，SwiftUI会自动压缩Image的宽度以适配空间，导致左右空白。改用frame(width: geo.size.width)固定Image宽度为父视图宽度，确保其始终占满屏幕，同时aspectRatio(contentMode: .fit)会自动计算合适的高度，保持图片比例。

给Text添加ScrollView后，即使内容过多，也只会在自身区域内滚动，不会挤压Image的布局空间，彻底解决空白问题。

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