Button
创建基础按钮
文本按钮
使用 init(_:action:)
初始化方法创建 Button,该方法的2种定义如下:
1/// 创建按钮
2/// - Parameters:
3/// - titleKey: 按钮本地化标题的键,用于描述按钮操作的目的。
4/// - action: 用户触发按钮时要执行的操作。
5@preconcurrency nonisolated
6init(
7 _ titleKey: LocalizedStringKey,
8 action: @escaping @MainActor () -> Void
9)
10
11/// 创建按钮
12/// - Parameters:
13/// - title: 描述按钮操作目的的字符串。
14/// - action: 用户触发按钮时要执行的操作。
15@preconcurrency nonisolated
16init<S>(
17 _ title: S,
18 action: @escaping @MainActor () -> Void
19) where S : StringProtocol
示例:
1Button("按钮") {
2 btnAction()
3}
4
5private func btnAction(){ ... }
自定义按钮
使用 init(action:label:)
创建一个显示自定义标签的按钮。该方法的定义如下:
1/// 创建一个显示自定义标签的按钮
2/// - Parameters:
3/// - action: 用户触发按钮时要执行的操作。
4/// - label: 描述按钮操作目的的视图。
5@preconcurrency
6init(
7 action: @escaping @MainActor () -> Void,
8 @ViewBuilder label: () -> Label
9)
示例:
1Button(action: btnAction) {
2 Text("按钮")
3}
4private func btnAction(){ ... }
系统图标按钮
使用 init(_:systemImage:action:)
创建一个显示系统图标的按钮。该方法的2种定义如下:
1/// 创建一个显示系统图标和文字标签的按钮
2/// - Parameters:
3/// - titleKey: 按钮本地化标题的键,用于描述按钮操作的目的。
4/// - systemImage: 系统图标名称。
5/// - action: 用户触发按钮时要执行的操作。
6nonisolated
7init(
8 _ titleKey: LocalizedStringKey,
9 systemImage: String,
10 action: @escaping @MainActor () -> Void
11)
12
13/// 创建一个显示系统图标和文字标签的按钮
14/// - Parameters:
15/// - title: 描述按钮操作目的的字符串。
16/// - systemImage: 系统图标名称。
17/// - action: 用户触发按钮时要执行的操作。
18nonisolated
19init<S>(
20 _ title: S,
21 systemImage: String,
22 action: @escaping @MainActor () -> Void
23) where S : StringProtocol
示例:
1Button("按钮", systemImage: "plus") {
2 btnAction()
3}
4
5private func btnAction(){ ... }
创建角色按钮
ButtonRole 结构体提供了按钮用途的描述。destructive
表示按钮执行破坏性操作,如删除用户数据; cancel
表示按钮取消当前操作。
使用
init(_:role:action:)
创建一个文本标签的角色按钮。1Button("按钮", role: .destructive, action: btnAction) 2 3private func btnAction(){ ... }
使用
init(_:systemImage:role:action:)
创建一个显示系统图标的角色按钮。1Button("按钮6", systemImage: "plus", role: .destructive, action: btnAction) 2 3private func btnAction(){ ... }
Note图标在左侧展示、文本在右侧展示;若文本为空字符串,则只展示系统图标;若系统图标的名称错误,则只展示文本;
按钮的修饰符
ButtonStyle
实例方法:buttonStyle(_:)。该方法接收一个符合 ButtonStyle
协议的样式,或符合 PrimitiveButtonStyle
协议的样式。它允许你自定义按钮的外观和行为。
系统提供了下面几种样式:
- automatic :默认的按钮样式
- bordered :带边框的按钮样式
- plain: 文本样式的按钮
- borderless: 无边框样式的按钮
- borderedProminent: 背景突出样式的按钮
1/// 应用到单个按钮
2Button("按钮") { ... }
3 .buttonStyle(.borderedProminent)
4
5/// 应用到多个按钮
6HStack {
7 Button("按钮") { ... }
8 Button("按钮") { ... }
9 ...
10}
11.buttonStyle(.bordered)