时间戳

首页 > 解决方案 > NavigationView 与 NavigationLinks 替换屏幕的不同部分？

swiftui - NavigationView 与 NavigationLinks 替换屏幕的不同部分？

问题描述

我正在尝试使用 SwiftUI 实现一个主视图（用于游戏），它的底部有一个广告横幅。当用户从主视图导航到设置视图时，相同的广告横幅应保留在那里并继续显示广告。但是当用户从主视图导航到游戏视图时，横幅不应该是可见的。

我正在努力使用 NavigationView 来实现这一点。根据我在视图层次结构中定位 NavigationView 的方式，所有 NavigationLink 要么将广告横幅保留在原位，要么将其隐藏。我曾尝试仅使用一个 NavigationView 并且还使用了两个不同的 NavigationViews，包括嵌套和非嵌套，但似乎没有任何工作正常......

下面有一个简单的代码片段，它不起作用，但给你一些工作。两个链接都在底部留下红色的“广告横幅”。如果我将“广告横幅”代码（Spacer 和 HStack）移动到内部 VStack 中，则两个链接都会转到没有广告的视图。

如何在同一视图中具有不同行为的 NavigationLinks，其中一个替换整个屏幕，另一个使广告在下方可见？

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            NavigationView {
                VStack {
                    NavigationLink(destination: Text("No Ads")) {
                        Text("Link to a view with no Ads") // How to make this link to hide the Ad below?
                    }
                    NavigationLink(destination: Text("Ad visible")) {
                        Text("Link to a view with same Ad visible") // This link works as expected
                    } // Try moving the Ad banner right under here to see the other beavior
                }
            }
            Spacer() // This below is the Ad banner 
            HStack {
                Spacer()
                Text("Ad is shown here")
                    .padding()
                Spacer()
            }
            .background(Color.red)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

标签： swiftuiswiftui-navigationlink

解决方案

您可以根据点击的导航链接显示广告横幅。

struct ContentView: View {
    @State var firstActive : Bool = false
    @State var secondActive : Bool = false

    var body: some View {
        VStack {
            NavigationView {
                VStack {
                    NavigationLink(destination: Text("No Ads"), isActive: self.$firstActive) {
                        Text("Link to a view with no Ads") // How to make this link to hide the Ad below?
                    }
                    NavigationLink(destination: Text("Ad visible"), isActive: self.$secondActive) {
                        Text("Link to a view with same Ad visible") // This link works as expected
                    } // Try moving the Ad banner right under here to see the other beavior
                }
            }
            
            if (secondActive || (!secondActive && !firstActive))
            {
                Spacer() // This below is the Ad banner
                HStack {
                    Spacer()
                    Text("Ad is shown here")
                        .padding()
                    Spacer()
                }
                .background(Color.red)
            }
        }
    }
}

在 NavigationLink 中使用两个用作绑定的状态将跟踪哪个 NavigationLink 处于活动状态。然后仅在非活动或仅第二个活动时显示广告横幅。

推荐阅读