在 .overlay 中显示 Button 的 SwiftUI 问题

Question

我正在尝试使用此 Calendar View，以便在点击日历上的某一天后，您可以导航到该特定日期的详细视图。下面的代码可以导航到 DetailView，但是它遮盖了天数标签，我不明白为什么？

import SwiftUI

struct TestCalendar: View {

 @EnvironmentObject var trackerDataStore: TrackerDataStore
  @Environment(\.calendar) var calendar

    private var year: DateInterval {
        calendar.dateInterval(of: .year, for: Date())!
    }

    var body: some View {
    NavigationView {
        ScrollView {
            CalendarView(interval: year) { date in
                Text("30")
                    .hidden()
                    .padding(8)
                    .background(Color.blue)
                    .clipShape(Circle())
                    .padding(.vertical, 4)
                    .overlay(
                    
                       NavigateFromCalendarButton(
                            action: {
                                print("\(date) was tapped")
                            },
                            destination: {
                                WorkoutDetailView().environmentObject(trackerDataStore)
                            },
                            label: { Text(String(self.calendar.component(.day, from: date))) }
                        )
                
                    )
                
            }
        }
        }
    }
}

struct TestCalendar_Previews: PreviewProvider {
    static var previews: some View {
        TestCalendar()
    }
}


struct NavigateFromCalendarButton<Destination: View, Text: View>: View {
    var action: () -> Void = { }
    var destination: () -> Destination
    var label: () -> Text

    @State private var isActive: Bool = false

    var body: some View {
        Button(action: {
            self.action()
            self.isActive.toggle()
        }) {
            label()
              .background(
                ScrollView { // Fixes a bug where the navigation bar may become hidden on the pushed view
                    NavigationLink(destination: LazyDestination { self.destination() },
                                                 isActive: self.$isActive) { EmptyView() }
                }
            
              )
        }
    }
}

// This view lets us avoid instantiating our Destination before it has been pushed.
struct LazyDestination<Destination: View>: View {
    var destination: () -> Destination
    var body: some View {
        self.destination()
    }
}

Answer 1

你的背景是蓝色的，默认的按钮强调色是蓝色，所以它是不可见的。

这是可能的修复方法（或将背景更改为其他颜色）。使用 Xcode 12.1 / iOS 14.1

测试

var body: some View {
    Button(action: {
        self.action()
        self.isActive.toggle()
    }) {
        label()
          .background(
            ScrollView { // Fixes a bug where the navigation bar may become hidden on the pushed view
                NavigationLink(destination: LazyDestination { self.destination() },
                                             isActive: self.$isActive) { EmptyView() }
            }
        
          )
    }
    .accentColor(.white)      // << here !!
}

在 .overlay 中显示 Button 的 SwiftUI 问题

SwiftUI issue showing Button in .overlay

calendar

ios

swift

swiftui