如何使用包含具有某些布局的 ZStack 的 navigationLink 导航到详细信息屏幕

Question

我正在构建一个食谱应用程序，我按如下方式构建它：首先，我在一个单独的结构中创建了一个基本视图，其中 Image 作为背景，顶部有一些文本。然后我创建了一些水平的 ScrollViews，我在其中嵌入了这些基本视图的视图。我希望，当用户点击其中一个视图时，他们会根据他们的选择转到详细信息屏幕。为此，我将视图的所有代码以及图像和文本嵌入到 navigationLink 中。但是当我运行模拟器中的应用程序并按下其中一个视图时，没有任何反应。

这是带有文本和图像的视图代码：

NavigationLink(destination: DetailView(title: titleText)) {
            ZStack {
                Image(foodImageName)
                    .resizable()
                    .renderingMode(.original)

                VStack {
                    Text(titleText)
                        .foregroundColor(Color.init(hex: "AAAAAA"))
                        .font(.system(size: 30, weight: .semibold))
                    Spacer()
                }
            }
            .frame(width: 189, height: 194)
            .cornerRadius(15)
            .shadow(color: Color.init(hex:"000000"), radius: 7,x: 7, y: 7)
        }

这是主视图的代码：

struct ContentView: View {

    private var spacing: CGFloat = 20
    var body: some View {
        NavigationView {
            VStack {
                Text("First Course")
                    .frame(height: 36)
                    .font(.system(size: 25, weight: .semibold))

                ScrollView (Axis.Set.horizontal, showsIndicators: false){
                    HStack{
                        MenuTopicView(titleText: "Soup", foodImageName: "Soup")
                        MenuTopicView(titleText: "Fish", foodImageName: "Soup")
                    }
                }.frame(height: 200)

                Text("Main Course")
                    .frame(height: 36)
                    .font(.system(size: 25, weight: .semibold))

                ScrollView(Axis.Set.horizontal) {
                    HStack {
                        MenuTopicView(titleText: "Steak", foodImageName: "Soup")
                        MenuTopicView(titleText: "Chicken", foodImageName: "Soup")
                    }
                }

                Text("Dessert")
                    .frame(height: 36)
                    .font(.system(size: 25, weight: .semibold))

                ScrollView(Axis.Set.horizontal) {
                    HStack {
                        MenuTopicView(titleText: "Ice cream", foodImageName: "Soup")
                        MenuTopicView(titleText: "Pancakes", foodImageName: "Soup")
                    }
                }
            }
        .navigationBarTitle("Recipes")
        }
    }

}

有人对我做错了什么有什么建议吗？谢谢！

Answer 1

我看到您的主视图包含在 NavigationView 中，但是 VStack 中的 none 项包含在 NavigationLink 中。你可以试试这个：

NavigationView {
    VStack {
        NavigationLink(destination: DetailView(title: titletext) {
            Text("First Course")
                .frame(height: 36)
                .font(.system(size: 25, weight: .semibold))

            ScrollView (Axis.Set.horizontal, showsIndicators: false){
                HStack{
                    MenuTopicView(titleText: "Soup", foodImageName: "Soup")
                    MenuTopicView(titleText: "Fish", foodImageName: "Soup")
                }
            }.frame(height: 200)
        }
    }
}

为了 NavigationLink 工作，它必须嵌入 NavigationView。

Answer 2

@eatyourpotato 这是我的代码，评论太长了，所以在这里：

    var body: some View {
        NavigationView {

            NavigationLink(destination: RecipeView(recipeName: titleText)) {
                ZStack {
                    Image(foodImageName)
                        .resizable()
                        .renderingMode(.original)

                    VStack {
                        Text(titleText)
                            .foregroundColor(Color.init(hex: "AAAAAA"))
                            .font(.system(size: 30, weight: .semibold))
                        Spacer()
                    }
                }
                .frame(width: 189, height: 194)
                .cornerRadius(15)
                .shadow(color: Color.init(hex:"000000"), radius: 7,x: 7, y: 7)
            }
        }
    }

Answer 3

您应该将每个 MenuTopicView 包装在其单独的 NavigationLink 中并将其添加到您的 ContentView 以使其正常工作，因为它们都有各自的目的地。所以像这样:

            ScrollView (Axis.Set.horizontal, showsIndicators: false){
                HStack{
                    NavigationLink(destination: DetailView("Soup")) {
                        MenuTopicView(titleText: "Soup", foodImageName: "Soup")
                    }
                    NavigationLink(destination: DetailView("Fish")) {
                        MenuTopicView(titleText: "Fish", foodImageName: "Soup")
                    }
                }
            }.frame(height: 200)

我建议制作更通用的视图，这样您就不必重复自己。像这样：

struct ContentView: View {
    let sections: [MenuSection]

    private var spacing: CGFloat = 20
    var body: some View {
        NavigationView {
            VStack {
                ForEach(sections, id: \.self) { section in
                    MenuSectionView(sectionTitle: section.title, items: section.items)
                }

            }
            .navigationBarTitle("Recipes")
        }
    }
}

struct MenuSectionView: View {
    let sectionTitle: String
    let items: [MenuItem]

    var body: some View {
        VStack {
            Text(sectionTitle)
                .frame(height: 36)
                .font(.system(size: 25, weight: .semibold))
            ScrollView (Axis.Set.horizontal, showsIndicators: false) {
                HStack {
                    ForEach(items, id: \.self) { item in
                        NavigationLink(destination: RecipeView(recipeName: item.title)) {
                            MenuTopicView(titleText: item.title, foodImageName: item.image)
                        }
                    }
                }
            }.frame(height: 200)
        }
    }
}

如何使用包含具有某些布局的 ZStack 的 navigationLink 导航到详细信息屏幕

How to navigate to a detail screen with a navigationLink containing a ZStack with some layout

ios

swiftui

swiftui-navigationlink