I am trying to mimic (as much as SwiftUI allows) the default Apple TV behavior of tv shows grid using SwiftUI
when i create a custom style button and add a context menu the context menu doesn't work
Main View:
struct TVButtons: View {
var body: some View {
VStack
{
HStack
{
TVButton(name: "The Goldbergs")
TVButton(name: "2 Broke Girls")
TVButton(name: "Just Shoot Me")
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.orange)
}
}
TBButton struct (with working context but bad look):
struct TVButton: View {
let name: String
var body: some View {
Button(action: {print("Playing: \(name)")}, label: {
VStack
{
Image(systemName: "text.badge.star")
.frame(width: 240, height: 340)
.background(Color.blue)
.cornerRadius(10)
Text(name)
.padding([.top], 10)
}
.frame(width: 240, height: 400)
})
// .buttonStyle(TVButtonsStyle()) // <-- un-remark this to see good look but no ContextMenu
.contextMenu {
Button("Watch Now", action: {print("Watching: \(name)")})
Button("Add to Fav", action: {print("Added: \(name) to favorites")})
Button("Add to Playlist", action: {print("Added: \(name) to playlist")})
}
}
}
TVButton Style struct that looks better but won't allow context menu to work
struct TVButtonsStyle: ButtonStyle
{
func makeBody(configuration: ButtonStyle.Configuration) -> some View
{
TVButton(configuration: configuration)
}
struct TVButton: View
{
let configuration: ButtonStyle.Configuration
@Environment(\.isFocused) private var isFocused: Bool
var body: some View {
return configuration.label
.shadow(color: Color.black, radius: isFocused ? 10 : 5, x: 5, y: isFocused ? 20 : 5)
.scaleEffect(isFocused ? 1.2 : 1.0)
}
}
}
the bad look with contextMenuWorking:
and the good look but no working context menu:
has anyone succeeded achieving this look or activating context-menu using costume-style-button?
any tip would be appreciated