SwiftUI 中 ScrollView 的奇怪行为

Question

我目前正在温习我的 SwiftUI 知识，并且正在构建这个任务屏幕。然而，ScrollView 有一个奇怪的部分，我无法解释如何删除（第一个屏幕截图中选项卡栏上方的灰色区域）。当完全滚动到应用程序底部时，它似乎消失了。

注意：我有一个自定义 TabBar，并且在我的 ContentView 中，所有视图都位于 ZStack 中

struct DailyTaskView: View {
    var tasks: [Task]
    
    var body: some View {
        ZStack {
            Color.gBlack.ignoresSafeArea(.all)
            
            ScrollView(.vertical, showsIndicators: false) {
                VStack {
                    ForEach(tasks) { task in
                        TaskItemView(task: task)
                            .padding(.vertical, 10)
                    }
                }
            }
        }
    }
}

struct TaskItemView: View {
    var task: Task
    
    var body: some View {
        HStack(alignment: .center, spacing: 40) {
            Circle()
                .frame(width: 10, height: 10)
                .foregroundColor(.white)
                .shadow(color: .white.opacity(0.1), radius: 3)
            
            VStack(alignment: .leading, spacing: 8) {
                HStack(spacing: 8) {
                    Text(task.title)
                        .foregroundStyle(Color.white)
                        .font(.title)
                    
                    Spacer()
                    
                    Label("11:22 PM", systemImage: "clock")
                        .foregroundStyle(Color.white)
                }
                
                Text(task.description)
                    .foregroundStyle(Color.white)
                    .font(.callout)
            }
//            .frame(maxWidth: .infinity)
            .padding(15)
            .background(task.tint, in: .rect(topLeadingRadius: 15, bottomLeadingRadius: 15))
//            .clipShape(.rect(cornerRadius: 20))
            .strikethrough(task.isCompleted, pattern: .solid, color: .white)
        }
        .padding(.leading)
    }
}

struct ContentView: View {
    @State private var tabSelection: Int = 0
    @State private var tasks: [Task] = sampleTask.sorted(by: {$1.date > $0.date})
    
    var body: some View {
        
        ZStack {
            Color.gBlack.ignoresSafeArea(.all)
            
            VStack() {
                DateHeaderView()
                    .frame(maxWidth: .infinity)
                    .background(Color(Color.gBlack))
                
                TabView(selection: $tabSelection) {
                    DailyTaskView(tasks: tasks)
                        .tag(0)
                    Text("Tab 2")
                        .foregroundStyle(Color.gBlack)
                        .font(.largeTitle)
                        .fontWeight(.black)
                        .tag(1)
                    
                }
                
                Spacer()
                
                TabBarView(tabSelection: $tabSelection)
            }
            .ignoresSafeArea(edges: .bottom)
        }
    }
}

尝试转换为 List 以查看它是否特定于 ScrollView

使用 .frame() 但没有运气

已验证没有任何额外的填充物可以干预

Answer 1

尝试将

.tabViewStyle(.page(indexDisplayMode: .never))

添加到您的

TabView(selection: $tabSelection)

。

注意，Swift 已经定义了

Task

，请将您的更改为其他内容（MyTask） 否则你会让你自己和编译器感到困惑。