I am trying to implement LazyHGrid on tvOS 14 with a pinned header. If I use standard buttons as grid items, the items scroll properly by changing its focus. However if I use my own custom style for the buttons, the first item is hidden behind the pinned header. Here's a repro code:
struct ContentView: View {
		var rows: [GridItem] = [GridItem(.fixed(113))]
		@State private var selected : Bool = false
		@State private var isFocused : Bool = false
		
		var body: some View {
				VStack (alignment: .leading, spacing: 0) {
						ScrollView([.horizontal]) {
								LazyHGrid (rows: rows, alignment: .top, spacing: 10, pinnedViews: .sectionHeaders, content: {
										Section(header: HeaderView(title: "NBC").border(Color.white)){
												ForEach((0...20), id: \.self) {
														let codepoint = $0 + 0x1f600
														let codepointString = String(format: "%02X", codepoint)
																Button(action: { print("selected")}) {
																		CellView(title: "\(codepointString)")
																}
// Comment out this line - it will start working properly
																.buttonStyle(MyCustomButton())
												}
										}
						 })
					 }
				}
		}
}
struct HeaderView: View {
		@State var title : String
		
		var body: some View {
				VStack {
						Text(title).frame(width: 160)
				}
				.frame(maxWidth: .infinity, alignment: .topLeading)
				.frame(height: 113)
				.background(Color.blue)
		}
}
struct CellView : View {
		@Environment(\.isFocused) var isFocused: Bool
		@State var title : String
		
		var body: some View {
				VStack{
						Text(title).font(.headline)
						Text("Very intersting movie")
				}.padding()
				.background(isFocused ? Color.gray : Color.red)
		}
}
struct MyCustomButton: ButtonStyle {
		func makeBody(configuration: Self.Configuration) -> some View {
				configuration.label
						.frame(minWidth: 0, maxWidth: 300)
						.foregroundColor(.white)
						.background(configuration.isPressed ? Color.red : Color.green)
						
		}
}
AlexYak
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Last seen
User for
Post
Replies
Boosts
Views
Activity
Neither navigation or Button's actions working in the pages of the TabView with PageTabViewStyle. Repro code:
@State private var selection = 0
var body: some View {
VStack {
TabView(selection: $selection) {
Button(action: {
print("First selected")
}){
Text("Fist")
}
.tag(0)
.buttonStyle(PlainButtonStyle()
Button(action: {
print("Second selected")
}){
Text("Second").tag(1)
}
.tag(1)
Button(action: {
print("Third selected")
}){
Text("Third")
}
.tag(2)
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
.frame(width: 900, height: 400)
.background(Color.blue)
}
}
}
I am having a hard time trying to figured out how to focus on a specific cell/row in the list in the SwiftUI 2.0 and tvOS 14. I need to be able to focus and select a specific record when I am navigated to a view. However when the focus is switched to the list, some random row is focused. I've tried ScrollView and List to create a list of items with Buttons as items and with appropriate prefersDefaultFocus. Nothing works. Here's some sample code:
struct ChannelListView: View {
@Namespace private var namespace
@ObservedObject var viewModel : LiveViewModel
@State var selection = Set<ChannelItem>()
var body: some View {
List(viewModel.channels, selection: $selection){ item in
ScrollViewReader { proxy in
Button(action: {
}){
ChannelItemView(item: item, selectedItem: $viewModel.selectedChannel, onSelected: { id in
})
.padding(.vertical, 2)
}
.buttonStyle(ChannelButtonStyle())
.prefersDefaultFocus(item == viewModel.selectedChannel, in: namespace)
}
}
.focusScope(namespace)
}
}
Any pointers?