替换List为ScrollView后内容无法占满屏幕宽度，原List中正常如何解决？

嘿，我太懂这种头疼的情况了！List自带的行容器会自动帮我们把内容拉伸到屏幕宽度，但换成ScrollView之后，布局逻辑就变了——ScrollView里的子视图默认只会根据自身的固有尺寸来布局，不会自动撑满横向空间，而且完全没必要用固定宽度这种治标不治本的办法。

给你两个靠谱的解决方案，都是从布局逻辑上解决问题：

方法一：用容器视图撑满宽度 #

把每个图片项包裹在一个VStack（或者HStack，看你布局需求）里，给这个容器设置frame(maxWidth: .infinity)，让它先撑满ScrollView的可用宽度，再让图片填充容器：

NavigationView {
    ScrollView {
        VStack(spacing: 0) { // spacing可以根据你的UI需求调整
            ForEach(landmarks) { landmark in
                landmark.image(forSize: 200)
                    .frame(maxWidth: .infinity) // 让图片填充容器宽度
                // 保留你的其他修饰符...
            }
        }
        .frame(maxWidth: .infinity) // 让VStack撑满ScrollView的宽度
    }
    .navigationBarTitle(Text(category.rawValue))
}

方法二：直接给图片设置全屏约束 #

如果你的图片本身支持缩放（比如用了.resizable()），可以直接给图片添加frame(maxWidth: .infinity)，再配合缩放模式确保图片填充整个空间：

NavigationView {
    ScrollView {
        ForEach(landmarks) { landmark in
            landmark.image(forSize: 200)
                .resizable() // 确保图片可以调整尺寸
                .frame(maxWidth: .infinity)
                .scaledToFill() // 让图片填充整个frame区域
                .clipped() // 裁剪超出frame的部分
            // 其他修饰符...
        }
    }
    .navigationBarTitle(Text(category.rawValue))
}

原理说明 #

frame(maxWidth: .infinity)这个修饰符的作用是告诉SwiftUI：这个视图要尽可能占据父视图提供的所有横向空间，而不是只使用自身的固有宽度。这其实就是List行容器默认的行为，但ScrollView不会自动给子视图加上这个约束，所以需要我们手动补上。

如果你的image(forSize:)方法给图片设置了固定宽度，记得先让图片支持缩放（比如加上.resizable()），否则frame(maxWidth: .infinity)可能不会生效哦。

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