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

Posted 2023-04-13

【中文标题】SwiftUI：检测 tvOS 上 NavigationView 中的选择更改

【英文标题】：SwiftUI: Detecting selection change in NavigationView on tvOS

【发布时间】：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 还没有准备好。这是我的代码：***.com/questions/63950127/…

【参考方案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 上的点击，但效果相同。