不需要的黑条覆盖了我的 swiftUI 应用程序中的一部分

Question

我是 Xcode 和 swiftUI 的新手，所以这对你来说可能很简单，但我感谢所有帮助。我正在制作一个实时评分应用程序。在我的日期栏（显示不同日期的分数）下，应该有我的实时评分栏，但是它的正下方有一个黑框，然后在它的下面是我的评分板。如果我尝试向上滚动它，或者放置负填充，它会被放在黑条下方，使其不再可见。

这是我的代码。

// ScoreView.swift


import SwiftUI

struct ScoreView: View {
    @EnvironmentObject private var vm: HomeViewModel
    @State private var initialScrollDone = false

    var body: some View {
        NavigationView {
            ZStack {
                Color.black.edgesIgnoringSafeArea(.all)

                VStack(spacing: 0) {
                    // Top Bar
                    HStack {
                        Button(action: {
                            // Account/log in action
                        }) {
                            Image("Logo_Icon")
                                .resizable()
                                .scaledToFit()
                                .frame(height: 35)
                        }

                        SearchBarView(searchText: $vm.searchText)

                        Spacer()
                    }
                    .padding(.horizontal)
                    .background(Color(red: 27/255, green: 28/255, blue: 30/255))

                    // Date Selector
                    GeometryReader { geometry in
                        ScrollView(.horizontal, showsIndicators: false) {
                            ScrollViewReader { scrollView in
                                LazyHStack(spacing: 10) {
                                    ForEach(vm.dates.indices, id: \.self) { index in
                                        VStack {
                                            
                                            Text(vm.dates[index] == vm.todayString() ? "Today" : vm.dates[index])
                                                .foregroundColor(vm.dates[index] == vm.selectedDate ? .white : Color(red: 122/255, green: 122/255, blue: 124/255))
                                                .bold()
                                                .padding(8)
                                                .cornerRadius(8)
                                                .onTapGesture {
                                                    withAnimation {
                                                        vm.selectedDate = vm.dates[index]
                                                    }
                                                }

                                            Rectangle()
                                                .frame(height: 16)
                                                .foregroundColor(vm.dates[index] == vm.selectedDate ? .blue : .clear)
                                                .cornerRadius(1.8)
                                        }
                                        .id(index)
                                        .frame(width: geometry.size.width / 5.4)
                                    }
                                }
                                .padding(.top, 4.0)
                                .background(Color(red: 27/255, green: 28/255, blue: 30/255))
                                .frame(maxHeight: 37)
                                .onReceive(vm.$selectedDate) { selectedDate in
                                    if let selectedIndex = vm.dates.firstIndex(of: selectedDate) {
                                        withAnimation {
                                            scrollView.scrollTo(selectedIndex, anchor: .center)
                                        }
                                    }
                                    
                                }
                                .onAppear {
                                    if !initialScrollDone, let todayIndex = vm.dates.firstIndex(of: vm.todayString()) {
                                        vm.selectedDate = vm.todayString()
                                        scrollView.scrollTo(todayIndex)
                                        initialScrollDone = true
                                    }
                                }
                            }
                        }
                    }

                    // Live Scores List
                    ScrollView {
                        VStack {
                            Section(header: Text("Favourites").foregroundColor(.white)) {
                                ForEach(vm.favouriteScores, id: \.self) { score in
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                }
                            }

                            Section(header: Text("OJCS").foregroundColor(.white)) {
                                ForEach(vm.ojcsScores, id: \.self) { score in
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                }
                            }

                            Section(header: Text("Andersons Weeknights").foregroundColor(.white)) {
                                ForEach(vm.andersonsWeeknightsScores, id: \.self) { score in
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                    ScoreRowView(score: score)
                                }
                            }
                        }
                        .background(Color.black)
                    }
                }
                .edgesIgnoringSafeArea(.bottom) // Ensure that ScrollView extends below the date selector
            }
        }
        .navigationBarHidden(true) // Hide the navigation bar
    }
}

struct ScoreRowView: View {
    var score: LiveScoreModel

    var body: some View {
        HStack {
            VStack {
                Image("Logo_Icon")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 20, height: 20)
                    .padding(.horizontal)

                Image("Logo_Icon")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 20, height: 20)
                    .padding(.horizontal)
            }

            VStack(alignment: .leading) {
                Text(score.teamName)
                Text(score.teamName)
            }

            Spacer()

            VStack(alignment: .trailing) {
                Text("Score: \(Int.random(in: 0...10)) - \(Int.random(in: 0...10))")
                Text("Time: \(score.gameTime)")
            }
        }
        .listRowBackground(Color.clear)
        .padding(.vertical, 8)
        .background(Color(red: 36/255, green: 37/255, blue: 39/255))
        .foregroundColor(.white)
        .cornerRadius(8)
    }
}

struct ScoreView_Previews: PreviewProvider {
    static var previews: some View {
        ScoreView()
            .environmentObject(HomeViewModel())
    }
}

如果您想运行此程序，请创建一个名为 HomeViewModel 的文件并将此代码粘贴到其中：

import Foundation
import Combine

class HomeViewModel: ObservableObject {
    @Published var searchText: String = ""
    @Published var favouriteScores: [LiveScoreModel] = []
    @Published var ojcsScores: [LiveScoreModel] = []
    @Published var andersonsWeeknightsScores: [LiveScoreModel] = []
    @Published var dates: [String] = []
    @Published var selectedDate: String = ""
    
    init() {
        // Sample data
        let sampleScores: [LiveScoreModel] = [
            LiveScoreModel(teamLogo: "team1_logo", teamName: "Team 1", category: "Favourites", score: 10, gameTime: "2:30 PM"),
            LiveScoreModel(teamLogo: "team2_logo", teamName: "Team 2", category: "OJCS", score: 8, gameTime: "3:45 PM"),
            LiveScoreModel(teamLogo: "team3_logo", teamName: "Team 3", category: "Andersons Weeknights", score: 12, gameTime: "5:15 PM"),
            // Add more
        ]
        
        self.favouriteScores = sampleScores.filter { $0.category == "Favourites" }
        self.ojcsScores = sampleScores.filter { $0.category == "OJCS" }
        self.andersonsWeeknightsScores = sampleScores.filter { $0.category == "Andersons Weeknights" }
        
        let currentDate = Date()
        self.dates = generateDates(from: currentDate, daysBefore: 7, daysAfter: 7)
    }
    
    func todayString() -> String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "MMM dd"
        return dateFormatter.string(from: Date())
    }
    
    private func generateDates(from startDate: Date, daysBefore: Int, daysAfter: Int) -> [String] {
        var dates: [String] = []
        let formatter = DateFormatter()
        formatter.dateFormat = "MMM dd"
        
        for day in -daysBefore...daysAfter {
            if let date = Calendar.current.date(byAdding: .day, value: day, to: startDate) {
                let dateString = formatter.string(from: date)
                dates.append(dateString)
            }
        }
        
        return dates
    }
}

这里有一些图片可以提供帮助。

我发现错误出在我的日期选择器的

GeometryReader

部分。这就是导致错误的部分。

过去几天我一直盯着这段代码试图弄清楚，但我做不到。我尝试删除 ZStack，但这只会弄乱所有内容并保留黑条，我尝试在不同位置添加填充并尝试手动设置

 .frame(height: )

，但它不会改变任何内容。

我感谢任何帮助。谢谢您的宝贵时间。

Answer 1

问题是由于渲染日期选择器的 GeometryReader 占据了您看到的所有黑色空间。您可以限制它，也可以像我一样使用叠加层：

// Date Selector
                GeometryReader { geometry in
                    ScrollView(.horizontal, showsIndicators: false) {
                        ScrollViewReader { scrollView in
                            LazyHStack(spacing: 10) {
                                ForEach(vm.dates.indices, id: \.self) { index in
                                    VStack {
                                        
                                        Text(vm.dates[index] == vm.todayString() ? "Today" : vm.dates[index])
                                            .foregroundColor(vm.dates[index] == vm.selectedDate ? .white : Color(red: 122/255, green: 122/255, blue: 124/255))
                                            .bold()
                                            .padding(8)
                                            .cornerRadius(8)
                                            .onTapGesture {
                                                withAnimation {
                                                    vm.selectedDate = vm.dates[index]
                                                }
                                            }

                                        Rectangle()
                                            .frame(height: 16)
                                            .foregroundColor(vm.dates[index] == vm.selectedDate ? .blue : .clear)
                                            .cornerRadius(1.8)
                                    }
                                    .id(index)
                                    .frame(width: geometry.size.width / 5.4)
                                }
                            }
                            .padding(.top, 4.0)
                            .background(Color(red: 27/255, green: 28/255, blue: 30/255))
                            .frame(maxHeight: 37)
                            .onReceive(vm.$selectedDate) { selectedDate in
                                if let selectedIndex = vm.dates.firstIndex(of: selectedDate) {
                                    withAnimation {
                                        scrollView.scrollTo(selectedIndex, anchor: .center)
                                    }
                                }
                                
                            }
                            .onAppear {
                                if !initialScrollDone, let todayIndex = vm.dates.firstIndex(of: vm.todayString()) {
                                    vm.selectedDate = vm.todayString()
                                    scrollView.scrollTo(todayIndex)
                                    initialScrollDone = true
                                }
                            }
                        }
                    }
                } //: GEOMETRY
                .overlay(alignment: .center) {
                    VStack {
                        Text("Place Score bar here")
                            .foregroundStyle(.white)
                    }
                }

请告诉我这是否对您来说是一个好的解决方案！