SwiftUI - ToolBar 工具栏
Toolbar 是 SwiftUI 中的 UI 控件,用于在应用程序的顶部或底部创建一个包含按钮、标题、菜单或其他项目的栏。它提供了一种最方便的方式,可以在当前视图上的栏中一起显示多个控件。
通常,工具栏与导航视图(如 NavigationView 或 NavigationStack)一起使用,以增强用户体验。工具栏 UI 控件通常适用于 iOS、macOS 和 watchOS。
在 SwiftUI 中创建 ToolBar
在 SwiftUI 中,我们可以借助 toolbar() 方法创建工具栏。此方法使用给定的元素创建一个工具栏,我们可以借助 ToolbarItem 或 ToolbarItemGroup 在工具栏中添加元素。
ToolbarItem 每次在工具栏中添加一个元素,而 ToolbarItemGroup 每次在指定的工具栏中添加多个元素。工具栏可以包含各种 UI 组件,例如按钮、滑块、切换按钮等。
语法
以下是语法 −
Toolbar{ ToolbarItem(placement: ToolbarItemPlacement){ //code } ToolbarItemGroup{ //code } }
我们还可以借助 placement 参数调整工具栏中元素的位置。它提供各种类型的位置,例如 .automatic、.topBarLeading、toBarTrailing、.buttonBar 等。
示例 1
以下 SwiftUI 程序创建一个带有一个按钮的工具栏。
import SwiftUI struct ContentView: View { var body: some View { NavigationView { Text("SwiftUI") .navigationTitle("Toolbar") // 带有单个按钮的工具栏 .toolbar { ToolbarItem(placement: .navigationBarTrailing) { Button(action: { print("Button tapped!") }) { Image(systemName: "plus").font(.largeTitle) }.background(.blue).foregroundStyle(.white) } } } } } #Preview { ContentView() }
输出

示例 2
以下 SwiftUI 程序创建一个工具栏,其中包含多个元素,例如系统图像、按钮、切换和滑块。
import SwiftUI struct ContentView: View { @State private var value1: Double = 5 @State private var value2: Bool = true var body: some View { NavigationView { Text("TutorialsPoint") .font(.title) .toolbar { // Leading item ToolbarItem(placement: .navigationBarLeading) { Button(action: { print("Leading button tapped!") }) { Image(systemName: "chevron.left") } } // Trailing item 1 - Slider ToolbarItem(placement: .navigationBarTrailing) { Slider(value: $value1, in: 0...10) .frame(width: 150) } // Trailing item 2 - Toggle ToolbarItem(placement: .navigationBarTrailing) { Toggle("On/Off", isOn: $value2) .padding() } // Trailing item 3 - Button ToolbarItem(placement: .navigationBarTrailing) { Button(action: { print("Trailing button tapped!") }) { Image(systemName: "gear") } } } } } } #Preview { ContentView() }
输出
