带有TabView的SwiftUI ScrollView具有另一个ScrollView_带有ScrollView和PageTabViewStyle的SwiftUI NavigationView ()_ScrollView的SwiftUI动画 - 腾讯云开发者社区

带有TabView的SwiftUI ScrollView具有另一个ScrollView

基础概念

ScrollView 和 TabView 是 SwiftUI 中的两个常用组件。ScrollView 允许用户滚动查看内容，而 TabView 则允许用户在多个选项卡之间切换。

问题描述

在 SwiftUI 中，将 ScrollView 放在 TabView 内部可能会导致滚动行为异常。这是因为 ScrollView 和 TabView 都有自己的滚动逻辑，它们可能会相互干扰。

原因

ScrollView 和 TabView 都试图管理用户的滚动行为，但它们的滚动逻辑不同。当两者嵌套使用时，可能会导致滚动冲突，使得滚动行为不符合预期。

解决方案

为了避免这种冲突，可以考虑以下几种解决方案：

1. 使用 `LazyVStack` 替代 `ScrollView`

如果 ScrollView 中的内容是垂直排列的，可以考虑使用 LazyVStack 替代 ScrollView。LazyVStack 只会在需要时渲染可见的内容，从而提高性能并避免滚动冲突。

TabView {
    LazyVStack {
        ForEach(0..<100) { index in
            Text("Item \(index)")
                .frame(height: 100)
        }
    }
    .padding()
    .background(Color.white)
    .cornerRadius(10)
    .shadow(radius: 5)
}

2. 使用 `GeometryReader` 控制滚动区域

可以使用 GeometryReader 来控制 ScrollView 的滚动区域，从而避免与 TabView 的滚动逻辑冲突。

TabView {
    GeometryReader { geometry in
        ScrollView {
            VStack {
                ForEach(0..<100) { index in
                    Text("Item \(index)")
                        .frame(height: 100)
                }
            }
            .frame(width: geometry.size.width)
        }
    }
}

3. 使用 `TabView` 的自定义实现

如果上述方法都无法解决问题，可以考虑自定义 TabView 的实现，手动管理选项卡的切换和内容的显示。

struct CustomTabView: View {
    @State private var selectedTab = 0

    var body: some View {
        VStack {
            HStack {
                Button(action: { selectedTab = 0 }) {
                    Text("Tab 1")
                }
                Button(action: { selectedTab = 1 }) {
                    Text("Tab 2")
                }
            }

            if selectedTab == 0 {
                ScrollView {
                    VStack {
                        ForEach(0..<100) { index in
                            Text("Item \(index)")
                                .frame(height: 100)
                        }
                    }
                }
            } else {
                ScrollView {
                    VStack {
                        ForEach(100..<200) { index in
                            Text("Item \(index)")
                                .frame(height: 100)
                        }
                    }
                }
            }
        }
    }
}