SwiftUI中嵌入LazyVStack后TabView图片尺寸缩小问题

1. 移除FeedPostView内部的NavigationStack #

你的Feed流已经处于NavigationStack中，FeedPostView里无需再嵌套NavigationStack——双重导航栈会干扰布局约束，直接导致TabView高度被压缩。

修改后的FeedPostView代码：

struct FeedPostView: View {
    let post: Post
    @Binding var showNavBar: Bool
    
    var body: some View {
        ZStack {
            NavigationLink(destination: PostDetailsView(post: post, showNavBar: $showNavBar)) {
                TabView {
                    ForEach(post.images.indices, id: \.self) { idx in
                        Image(post.images[idx])
                            .resizable()
                            .scaledToFill()
                            .frame(maxWidth: .infinity)
                            .clipped() // 防止图片超出容器边界
                    }
                }
                .tabViewStyle(.page)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: 450)
        .clipShape(RoundedRectangle(cornerRadius: 15.0))
        .overlay(PostHeaderView(post: post), alignment: .top)
        .overlay(PostCaptionView(post: post), alignment: .bottom)
        .padding([.leading, .trailing])
        .padding(.bottom, 15)
    }
}

2. 统一Image的缩放修饰符 #

原代码同时使用.aspectRatio(contentMode: .fit)和.scaledToFill()，两个修饰符冲突会导致布局计算异常。保留.scaledToFill()并添加.clipped()，确保图片填充容器且不溢出。

3. 强制FeedPostView保持高度（可选） #

如果修改后仍有高度压缩问题，给Feed流中的FeedPostView添加.fixedSize(horizontal: false, vertical: true)，告诉LazyVStack不要压缩其垂直高度：

ScrollView {
    LazyVStack(spacing: 8) {
        ForEach(Post.MOCK_POSTS) { post in
            FeedPostView(post: post, showNavBar: $showNavBar)
                .fixedSize(horizontal: false, vertical: true)
        }
    }
    .padding(.top, 10)
}
.navigationTitle("Feed")
.navigationBarTitleDisplayMode(.inline)

核心原因总结 #

• 双重NavigationStack会让SwiftUI布局系统产生约束歧义，移除内部导航栈即可解决大部分布局异常。
• 明确的.frame(maxHeight: 450)配合图片的填充规则，能固定TabView的高度，确保图片显示尺寸符合预期。

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