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

时间:2020-01-17 08:31:00

标签: ios swiftui swiftui-navigationlink

我正在构建一个食谱应用程序,其构建过程如下: 首先,我在一个单独的结构中创建了一个基本视图,其中以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")
        }
    }

}

有人对我做错了什么建议吗? 谢谢!

2 个答案:

答案 0 :(得分:0)

我看到您的主视图包装在VStack中,但是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工作,必须将其嵌入 private void txtSearch_TextChanged(object sender, EventArgs e) { string searchText = txtSearch.Text.ToLower(); List<EmplyesList> result = LoginData.employees.Where(t => t.FullName.ToLower().StartsWith(searchText) || t.Address.ToLower().StartsWith(searchText)).ToList(); dgvEmployeeList.AutoGenerateColumns = false; dgvEmployeeList.DataSource = result; } 中。

答案 1 :(得分:0)

您应该将每个0x00E9包裹在其单独的NavigationLink中,然后将其添加到您的MenuTopicView中,以便它们正常工作,因为它们都有各自的目的地。像这样:

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)