点击特定项目后，如何将导航栏标题设置为项目的名称？

Question

我正在创建一个晚餐菜单，其中包含可以点击的各种食物。每件商品都包装在通往其详细信息页面的NavigationLink中。

如何将项目的名称作为每个项目的导航栏标题？这是整个MenuItemsView结构和一个 gif 来演示我想要的食物项目标题的位置，就像在上一个Menu屏幕中一样。

struct MenuItemsView: View {
let food = (1...12).map { "Food ($0)" }
let drinks = (1...8).map { "Drink ($0)" }
let dessert = (1...4).map { "Dessert ($0)" }

let columns = [
GridItem(.adaptive(minimum: 80))
]

var body: some View {
NavigationView {
ScrollView {
VStack {
Text("Food")
.frame(maxWidth: .infinity, alignment: .leadingFirstTextBaseline)
.font(.title)
.padding(.init(top: -5, leading: 16, bottom: 0, trailing: 0))
LazyVGrid(columns: columns, spacing: 5.0) {
ForEach(food, id: .self) { item in
NavigationLink(destination: MenuItemDetailsView()) {
VStack {
ColorSquare(color: .black)
Text(item)

}
.padding(.init(top: 0, leading: 10, bottom: 0, trailing: 10))
}
}

}
}
VStack {
Text("Drinks")
.frame(maxWidth: .infinity, alignment: .leadingFirstTextBaseline)
.font(.title)
.padding(.init(top: -5, leading: 16, bottom: 0, trailing: 0))
LazyVGrid(columns: columns, spacing: 5.0) {
ForEach(drinks, id: .self) { item in
VStack {
ColorSquare(color: .black)
Text(item)
}
.padding(.init(top: 0, leading: 10, bottom: 0, trailing: 10))
}

}
}
VStack {
Text("Desert")
.frame(maxWidth: .infinity, alignment: .leadingFirstTextBaseline)
.font(.title)
.padding(.init(top: -5, leading: 16, bottom: 0, trailing: 0))
LazyVGrid(columns: columns, spacing: 5.0) {
ForEach(dessert, id: .self) { item in
VStack {
ColorSquare(color: .black)
Text(item)
}
.padding(.init(top: 0, leading: 10, bottom: 0, trailing: 10))
}

}
}

}
.navigationBarTitle("Menu")
.navigationBarItems(trailing:
Button(action: {
print("Edit button pressed...")
}) {
NavigationLink(destination: MenuItemsOptionView()) {
Image(systemName: "slider.horizontal.3")
}
}
)
}
}
}

食品细节演示

作为奖励，如果有人能告诉我如何将Color Squares与他们各自的类别名称和Menu标题正确对齐，我将不胜感激，哈哈。谢谢！

Answer 1

@State itemname:String
var body: some View {
...
.navigationTitle(){
Text(itemname)
}

Answer 2

我能够解决这个问题。方法如下：

我将itemName: item作为NavigationLink参数作为目标传递。在MenuItemDetailsView文件中，正文设置为Text视图和navigationBarTitle修改器，并传入itemName。 当然，itemName是在传递之前在MenuItemDetailsView结构体之上创建的。以下是解决问题的MenuItemDetailsView和MenuItemsView代码以及快速演示：

MenuItemDetailsView

import SwiftUI
struct MenuItemDetailsView: View {
var itemName: String

var body: some View {
Text(itemName)
.navigationBarTitle(itemName)
}
}
struct MenuItemDetailsView_Previews: PreviewProvider {
static var previews: some View {
let food = (1...12).map { "Food ($0)" }

return Group {
ForEach(food, id: .self) { item in
NavigationView {
MenuItemDetailsView(itemName: item)
}
.previewDisplayName(item)
}
}
}
}

MenuItemsView

import SwiftUI
struct ColorSquare: View {
let color: Color

var body: some View {
color
.frame(width: 100, height: 100)
}
}
struct MenuItemsView: View {
let food = (1...12).map { "Food ($0)" }
let drinks = (1...8).map { "Drink ($0)" }
let dessert = (1...4).map { "Dessert ($0)" }

let columns = [
GridItem(.adaptive(minimum: 80))
]

var body: some View {
NavigationView {
ScrollView {
VStack {
Text("Food")
.frame(maxWidth: .infinity, alignment: .leadingFirstTextBaseline)
.font(.title)
.padding(.init(top: -5, leading: 16, bottom: 0, trailing: 0))
LazyVGrid(columns: columns, spacing: 5.0) {
ForEach(food, id: .self) { item in
NavigationLink(destination: MenuItemDetailsView(itemName: item)) {
VStack {
ColorSquare(color: .black)
Text(item)

}
.padding(.init(top: 0, leading: 10, bottom: 0, trailing: 10))
}
}

}
}...more code

食品项目导航标题已解决演示