我正在构建一个食谱应用程序,并按如下方式构建它:
首先,我在一个单独的结构中创建了一个带有 Image
的基本 View 。作为背景和顶部的一些文字。然后我创建了几个水平 ScrollViews
我在其中嵌入了这些基本 View 的 View 。
我希望,当用户点击其中一个 View 时,他们会根据他们的选择进入详细信息屏幕。为此,我将 View 的所有代码与图像和文本嵌入到 navigationLink
中。 .但是当我在模拟器中运行应用程序并按下其中一个 View 时,什么也没有发生。
这是带有文本和图像的 View 代码:
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")
}
}
}
有人对我做错了什么有建议吗?
谢谢!
最佳答案
您应该包装每个 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)
我建议制作更通用的 View ,这样您就不必重复自己。像这样的东西:
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)
}
}
}
关于ios - 如何使用包含具有某些布局的 ZStack 的 navigationLink 导航到详细信息屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59783652/