iOS17 SwiftUI实现Instagram/TikTok/X式用户Profile滚动视图遇阻求助

问题描述 #

我跟着Kavsoft的YouTube教程实现类似Instagram、TikTok、X的Profile页横向标签切换功能（帖子、收藏等标签横向滚动切换），但在外层添加ScrollView后功能失效。已知问题出在嵌套ScrollView上，试过把LazyHStack改成HStack，但会导致滚动视图高度取最高子视图的高度，切换时出现空白；也试过手动调整滚动视图高度，但过渡效果很差。求解决方法或可用的SwiftUI工具包。

代码片段 #

简化后的ProfileScreen代码 #

struct ProfileScreen: View {
    @State private var selectedTab: ProfileScreenTabOption? = .media
    
    
    var body: some View {
        ScrollView { // 注释掉ScrollView则功能正常
            VStack(alignment: .leading) {
                Color.blue
                    .frame(height: 350)
                
                customTabBar()
                
                ScrollView(.horizontal) {
                    LazyHStack(spacing: 16) {
                        sampleView(.red, count: 3)
                            .id(ProfileScreenTabOption.media)
                            .containerRelativeFrame(.horizontal)
                        
                        sampleView(.purple, count: 50)
                            .id(ProfileScreenTabOption.saved)
                            .containerRelativeFrame(.horizontal)
                    }
                    .scrollTargetLayout()
                }
                //取消注释可调整高度 
                //.frame(height: selectedTab == .media ? 300 : 1000)
                .scrollPosition(id: $selectedTab)
                .scrollIndicators(.hidden)
                .scrollTargetBehavior(.viewAligned)
                .ignoresSafeArea()
            }
        }
    }
}

ProfileScreenTabOption枚举定义 #

enum ProfileScreenTabOption: Identifiable, CaseIterable {
    case media
    case saved
    
    var id: Self {
        return self
    }
    
    var systemName: String {
        switch self {
        case .media: "photo.on.rectangle"
        case .saved: "bookmark"
        }
    }
}

ProfileScreen的ViewBuilder扩展 #

extension ProfileScreen {
    private func customTabBar() -> some View {
        HStack(spacing: 0) {
            ForEach(ProfileScreenTabOption.allCases) { tab in
                Image(systemName: tab.systemName)
                    .frame(maxWidth: .infinity)
                    .frame(height: 29)
                    .onTapGesture {
                        withAnimation(.snappy(duration: 0.1)) {
                            selectedTab = tab
                        }
                    }
                    
            }
        }
    }
    
    private func sampleView(_ color: Color, count: Int) -> some View {
        ScrollView(.vertical) {
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 1), count: 3), spacing: 1) {
                ForEach(1...count, id: \.self) { x in
                    RoundedRectangle(cornerRadius: 0)
                        .fill(color.gradient)
                        .frame(height: 150)
                        .overlay {
                            Text("\(x)")
                        }
                }
            }
        }
        .scrollDisabled(true) // 与ProfileScreen的ScrollView配合时可注释此行
    }
}

解决思路及方案 #

问题核心是嵌套ScrollView的滚动事件冲突，以及横向ScrollView在垂直ScrollView内无法正确计算自身高度。可以通过以下步骤修复：

1. 动态绑定横向ScrollView高度并优化过渡动画 #

手动绑定高度并使用平滑动画替代生硬的切换效果，避免空白或高度突变：

.frame(height: selectedTab == .media ? 300 : UIScreen.main.bounds.height - 400) // 根据实际布局调整数值
.animation(.smooth(duration: 0.3), value: selectedTab)

2. 优先响应横向滚动事件 #

给横向ScrollView添加高优先级手势，避免和外层垂直ScrollView的滚动事件冲突：

.highPriorityGesture(DragGesture(), including: .horizontal)

3. 修复子视图滚动状态 #

恢复子视图的垂直滚动功能，并确保子视图的垂直滚动事件优先被识别：

private func sampleView(_ color: Color, count: Int) -> some View {
    ScrollView(.vertical) {
        // ... 原有内容 ...
    }
    .scrollDisabled(false)
    .highPriorityGesture(DragGesture(), including: .vertical)
}

4. 替换scrollPosition为ScrollViewReader（可选） #

如果scrollPosition在嵌套场景下仍不稳定，改用ScrollViewReader手动控制滚动位置：

ScrollView(.horizontal) {
    LazyHStack(spacing: 16) {
        sampleView(.red, count: 3)
            .id(ProfileScreenTabOption.media)
            .containerRelativeFrame(.horizontal)
        
        sampleView(.purple, count: 50)
            .id(ProfileScreenTabOption.saved)
            .containerRelativeFrame(.horizontal)
    }
    .scrollTargetLayout()
}
.overlay(
    ScrollViewReader { proxy in
        Color.clear
            .onChange(of: selectedTab) { newValue in
                guard let tab = newValue else { return }
                withAnimation(.smooth) {
                    proxy.scrollTo(tab, anchor: .topLeading)
                }
            }
    }
)

完整修复后的代码 #

struct ProfileScreen: View {
    @State private var selectedTab: ProfileScreenTabOption? = .media
    
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                Color.blue
                    .frame(height: 350)
                
                customTabBar()
                
                ScrollView(.horizontal) {
                    LazyHStack(spacing: 16) {
                        sampleView(.red, count: 3)
                            .id(ProfileScreenTabOption.media)
                            .containerRelativeFrame(.horizontal)
                        
                        sampleView(.purple, count: 50)
                            .id(ProfileScreenTabOption.saved)
                            .containerRelativeFrame(.horizontal)
                    }
                    .scrollTargetLayout()
                }
                .frame(height: selectedTab == .media ? 300 : UIScreen.main.bounds.height - 400)
                .animation(.smooth(duration: 0.3), value: selectedTab)
                .scrollIndicators(.hidden)
                .scrollTargetBehavior(.viewAligned)
                .highPriorityGesture(DragGesture(), including: .horizontal)
                .ignoresSafeArea()
            }
        }
    }
}

enum ProfileScreenTabOption: Identifiable, CaseIterable {
    case media
    case saved
    
    var id: Self { self }
    
    var systemName: String {
        switch self {
        case .media: "photo.on.rectangle"
        case .saved: "bookmark"
        }
    }
}

extension ProfileScreen {
    private func customTabBar() -> some View {
        HStack(spacing: 0) {
            ForEach(ProfileScreenTabOption.allCases) { tab in
                Image(systemName: tab.systemName)
                    .frame(maxWidth: .infinity)
                    .frame(height: 29)
                    .onTapGesture {
                        withAnimation(.smooth(duration: 0.3)) {
                            selectedTab = tab
                        }
                    }
            }
        }
    }
    
    private func sampleView(_ color: Color, count: Int) -> some View {
        ScrollView(.vertical) {
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 1), count: 3), spacing: 1) {
                ForEach(1...count, id: \.self) { x in
                    RoundedRectangle(cornerRadius: 0)
                        .fill(color.gradient)
                        .frame(height: 150)
                        .overlay {
                            Text("\(x)")
                        }
                }
            }
        }
        .highPriorityGesture(DragGesture(), including: .vertical)
    }
}

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