如何在tvOS上使用SwiftUI在多个水平列表之间导航

问题描述

我在全局垂直列表中有多个可滚动的水平列表,并且难以管理焦点更改。

focus issue

我有两个主要问题:

  • 一个视图下面没有其他视图时,底部手势不会更新焦点。我希望重点转移到下面的视图附近。在我的GIF示例中,从第1节的第四个视图到第2节的第二个视图。

  • 一个视图不位于其正下方时,底部手势会将焦点移至垂直下方的视图。我希望焦点移到最近的底视图。在我的示例中,从第一节的第三视图到第二节的第二视图,而不是第三节的第三视图。

在我的tvOS应用程序中,有很多此问题的示例,已经通过结合使用@Environment(\.resetFocus) var resetFocusprefersDefaultFocus viewModifier进行了修复,但是我正在努力解决此用例。

我在this question上也看到了另一个类似的用例,但是还没有答案。

struct ContentView: View {
    var body: some View {
        vstack(alignment: .leading) {

            Text("Section 1")

            ScrollView(.horizontal) {
                HStack() {
                    ForEach(0 ..< 10) { item in
                        Button(action: {
                            
                        }) {
                            FocusableRectangle()
                        }.buttonStyle(CardButtonStyle())
                    }
                }.padding(40)
            }
            
            Text("Section 2")

            ScrollView(.horizontal) {
                HStack() {
                    ForEach(0 ..< 2) { item in
                        Button(action: {
                            
                        }) {
                            FocusableRectangle()
                        }.buttonStyle(CardButtonStyle())
                    }
                }.padding(40)
            }
            
            Text("Section 3")

            ScrollView(.horizontal) {
                HStack() {
                    ForEach(0 ..< 3) { item in
                        Button(action: {
                            
                        }) {
                            FocusableRectangle()
                        }.buttonStyle(CardButtonStyle())
                    }
                }.padding(40)
            }
            
            Spacer()
        }
    }
}

struct FocusableRectangle: View {
    @Environment(\.isFocused) var isFocused: Bool
    @State var color = Color.blue
    
    var body: some View {
        Rectangle()
            .fill(color)
            .frame(width: 300.0,height: 200.0)
            .onChange(of: isFocused,perform: { value in
                color = value ? Color.red : Color.blue
            })
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)