SwiftUI：检测 tvOS 上 NavigationView 中的选择更改答案

【问题标题】：SwiftUI: Detecting selection change in NavigationView on tvOSSwiftUI：检测 tvOS 上 NavigationView 中的选择更改
【发布时间】：2020-10-09 20:15:05
【问题描述】：

我正在为 tvOS 构建一个 SwiftUI 应用程序，目前正在尝试实现 UI。我在底部有 NavigationView，在顶部有标签，我希望标签显示当前处于焦点的 NavigationLink。这是我的代码：

@State private var selection: String? = nil

ZStack {

    Color.red.edgesIgnoringSafeArea(.all)

    VStack {

            Text(selection ?? "no value").background(Color.green)

            NavigationView {
                ScrollView(.horizontal) {
                    HStack{

                        VStack {
                            NavigationLink(destination: view2, tag: "1", selection: $selection) {
                            Image("placeholder")
                                .scaledToFit().frame(width:400, height: 225) }
                            Text("Button")
                        }

                        VStack {
                            NavigationLink(destination: view2, tag: "2", selection: $selection) {
                            Image("placeholder")
                                .scaledToFit().frame(width:400, height: 225) }
                            Text("Button")

                        }

                        ...
                                                           }

                    }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .bottomLeading)
                }
             }
            }
  }

但是，当我更改选择并且不显示任何值时，标签值不会改变：

有什么想法我应该在那里做什么？

【问题讨论】：

我在同一条船上 - 你找到解决方案了吗？我能想到的唯一方法是在 NavigationLink 上覆盖 .focusable() - 但随后 destination 不起作用
@beamercola 不，我没有☹️。不得不想出一个不同的用户界面
该死，太糟糕了。我已经很接近了，但有些事情告诉我 SwiftUI 还没有准备好。这是我的代码：stackoverflow.com/questions/63950127/…

标签： swift swiftui tvos swiftui-navigationlink

【解决方案1】：

我相信您的Image 会占用您的NavigationLink 的选择效果，一个简单的解决方法是将.padding() 添加到您的图像中。 Here 是一些很好的示例，您可以使用它来自定义 NavigationLink 选择。更具体地说是NavigationLink 的.buttonStyle。

     var body: some View {
    ZStack {
        VStack{
            NavigationView {
                ScrollView(.horizontal){
                    HStack(spacing: 90) {
                        VStack{

                            NavigationLink(destination: ResultView(choice: "Chaka")) {
                                Image("chaka")
                                    .scaledToFit()
                                    .frame(width:400, height: 225)
                                    .padding(20)


                                Text("Choose Chaka")
                            }
                        }

                        VStack{
                            NavigationLink(destination: ResultView(choice: "Dr Rick Marshall")) {
                                Image("rick_marshall")
                                    .scaledToFit().frame(width:400, height: 225)
                                    .frame(width:400, height: 225)
                                    .padding(20)

                                Text("Padding 20").foregroundColor(Color.white)

                            } .buttonStyle(DefaultButtonStyle()) // buttonStyle allows for selection customiaztion ie color
                        }

                        VStack{
                            NavigationLink(destination: ResultView(choice: "Will Stanton")) {
                                Image("danny_mcBride")
                                    .scaledToFit().frame(width:400, height: 225)
                                    .frame(width:400, height: 225)


                                Text("No Padding").foregroundColor(Color.white)

                            } .buttonStyle(DefaultButtonStyle())
                        }
                    }.padding(60) // allows for selection pop out effect to be seen
                }
                .navigationBarTitle("Navigation")
            }
        }
    }
}

【讨论】：

【解决方案2】：

试试这个：

    VStack {
        NavigationLink(destination: view2, tag: "2", selection: $selection) {
            Image("placeholder")
                .scaledToFit().frame(width:400, height: 225) }
            Text("Button")
        }.onTapGesture{ selection = "2" }
    }

onTapGesture 将覆盖 NavigationLink 上的点击，但效果相同。

【讨论】：