SwiftUI 中的导航内容
Navigation stuff in SwiftUI
我正在尝试弄清楚如何在 SwiftUI 中使用导航栏
我想把 BarButtonItem
和图片放在 NavigationBar
我已经能够显示导航栏并放置标题
var body: some View {
NavigationView{
List(0...5) { note in
VStack(alignment: .leading) {
Text("title")
Text("Date")
.font(.subheadline)
.foregroundColor(.secondary)
}
}
.navigationBarTitle(Text("Notes"))
}
}
iOS 14
您应该使用 toolbar
修饰符:
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button("Cancel") { /* action */ }
}
ToolbarItem(placement: .navigationBarTrailing) {
Button(action: { /* Actions */ }, label: {
HStack {
Image(systemName: "trash")
Text("Delete")
}
})
.foregroundColor(.red) // You can apply colors and other modifiers too
}
}
注意 1: 您可以在那里设置 ANY View
。 (不仅是 Button
)还有任何修饰符
注2:上面和下面的代码都将生成相同的外观项目,但方法不同
iOS 13 及以上(已弃用但仍然有效)
您应该使用 .navigationBarItems()
修饰符。例如,您可以像这样添加 Button
或 Image
:
.navigationBarItems(
leading: Button("Cancel") {
// Actions
},
trailing: Button(action: {
// Actions
}, label: { Label("Delete", systemImage: "trash") }
).foregroundColor(.red) // You can apply colors and other modifiers too
)
专业提示
始终尝试将每个项目封装在一个单独的结构中,这样您的代码将被简化并且很容易被更新的技术替换。例如,看看这个示例:
.navigationBarItems(
leading: MyCustomButtonItem(),
trailing: MyCustomButtonItem(text: "foo", image: "Bard")
)
.navigationBarItems()
是您要查找的函数。您可以指定前导视图、尾随视图或两者。在视图中,您可以指定水平和垂直堆栈以添加其他按钮。
var body: some View {
NavigationView{
List(0...5) { note in
VStack(alignment: .leading) {
Text("title")
Text("Date")
.font(.subheadline)
.foregroundColor(.secondary)
}
}
.navigationBarItems(leading: HStack {
Button(action: {}, label: {Image(systemName: "star.fill")})
Button(action: {}, label: {Text("Edit")})
}, trailing: VStack {
Button(action: {}, label: {Image(systemName: "star.fill")})
Button(action: {}, label: {Text("Edit")})
})
.navigationBarTitle(Text("Notes"))
}
}
从 parentViewController 放这个
NavigationLink(destination: NotesListView())
斯威夫特用户界面 2
在 SwiftUI 2 / iOS 14 中,navigationBarItems
修饰符 已弃用 。
相反,我们应该使用带有 ToolbarItem
s 的工具栏。
NavigationView {
List {
// ...
}
.navigationTitle("Notes")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button("Tap me") {
// action
}
}
ToolbarItem(placement: .navigationBarTrailing) {
Image(systemName: "plus")
}
}
}
您可以看到 documentation 更多 ToolbarItemPlacement
。
Check the image here
toolbar() 修饰符允许我们将单个或多个条形按钮项目添加到导航视图的前缘和后缘,以及我们视图的其他部分(如果需要) .这些可能是可点击的按钮,但没有限制——您可以添加任何类型的视图。
var body: some View {
NavigationView {
ScrollView {
VStack{
}//: VStack
}//: Scroll
.navigationTitle("Settings")
.toolbar(content: {
ToolbarItemGroup(placement: .navigationBarTrailing) {
Button {
presentationMode.wrappedValue.dismiss()
} label: {
Image(systemName: "xmark")
}
}
})
.padding()
}//: Navigation
}
我正在尝试弄清楚如何在 SwiftUI 中使用导航栏
我想把 BarButtonItem
和图片放在 NavigationBar
我已经能够显示导航栏并放置标题
var body: some View {
NavigationView{
List(0...5) { note in
VStack(alignment: .leading) {
Text("title")
Text("Date")
.font(.subheadline)
.foregroundColor(.secondary)
}
}
.navigationBarTitle(Text("Notes"))
}
}
iOS 14
您应该使用 toolbar
修饰符:
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button("Cancel") { /* action */ }
}
ToolbarItem(placement: .navigationBarTrailing) {
Button(action: { /* Actions */ }, label: {
HStack {
Image(systemName: "trash")
Text("Delete")
}
})
.foregroundColor(.red) // You can apply colors and other modifiers too
}
}
注意 1: 您可以在那里设置 ANY View
。 (不仅是 Button
)还有任何修饰符
注2:上面和下面的代码都将生成相同的外观项目,但方法不同
iOS 13 及以上(已弃用但仍然有效)
您应该使用 .navigationBarItems()
修饰符。例如,您可以像这样添加 Button
或 Image
:
.navigationBarItems(
leading: Button("Cancel") {
// Actions
},
trailing: Button(action: {
// Actions
}, label: { Label("Delete", systemImage: "trash") }
).foregroundColor(.red) // You can apply colors and other modifiers too
)
专业提示
始终尝试将每个项目封装在一个单独的结构中,这样您的代码将被简化并且很容易被更新的技术替换。例如,看看这个示例:
.navigationBarItems(
leading: MyCustomButtonItem(),
trailing: MyCustomButtonItem(text: "foo", image: "Bard")
)
.navigationBarItems()
是您要查找的函数。您可以指定前导视图、尾随视图或两者。在视图中,您可以指定水平和垂直堆栈以添加其他按钮。
var body: some View {
NavigationView{
List(0...5) { note in
VStack(alignment: .leading) {
Text("title")
Text("Date")
.font(.subheadline)
.foregroundColor(.secondary)
}
}
.navigationBarItems(leading: HStack {
Button(action: {}, label: {Image(systemName: "star.fill")})
Button(action: {}, label: {Text("Edit")})
}, trailing: VStack {
Button(action: {}, label: {Image(systemName: "star.fill")})
Button(action: {}, label: {Text("Edit")})
})
.navigationBarTitle(Text("Notes"))
}
}
从 parentViewController 放这个
NavigationLink(destination: NotesListView())
斯威夫特用户界面 2
在 SwiftUI 2 / iOS 14 中,navigationBarItems
修饰符 已弃用 。
相反,我们应该使用带有 ToolbarItem
s 的工具栏。
NavigationView {
List {
// ...
}
.navigationTitle("Notes")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button("Tap me") {
// action
}
}
ToolbarItem(placement: .navigationBarTrailing) {
Image(systemName: "plus")
}
}
}
您可以看到 documentation 更多 ToolbarItemPlacement
。
Check the image here
toolbar() 修饰符允许我们将单个或多个条形按钮项目添加到导航视图的前缘和后缘,以及我们视图的其他部分(如果需要) .这些可能是可点击的按钮,但没有限制——您可以添加任何类型的视图。
var body: some View {
NavigationView {
ScrollView {
VStack{
}//: VStack
}//: Scroll
.navigationTitle("Settings")
.toolbar(content: {
ToolbarItemGroup(placement: .navigationBarTrailing) {
Button {
presentationMode.wrappedValue.dismiss()
} label: {
Image(systemName: "xmark")
}
}
})
.padding()
}//: Navigation
}