©️ OverlookArt

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 结构体描述了按钮的用途,用于调整按钮的外观和行为。系统提供以下角色类型:

角色说明效果
0destructive执行破坏性操作(如删除数据)红色样式
1cancel取消当前操作特殊样式(平台相关)
2plain普通按钮(iOS 15+)无特殊效果

文本角色按钮

使用 init(_:role:action:) 初始化方法:

1Button("删除", role: .destructive) {
2    deleteAction()
3}

系统图标角色按钮

使用 init(_:systemImage:role:action:) 初始化方法:

1Button("删除", systemImage: "trash", role: .destructive) {
2    deleteAction()
3}
Note

图标在左侧、文本在右侧展示。若文本为空字符串,则只展示图标;若系统图标名称错误,则只展示文本。

按钮的修饰符

ButtonStyle

实例方法 buttonStyle(_:) 接收一个符合 ButtonStylePrimitiveButtonStyle 协议的样式,为视图中的所有按钮设置统一的外观。

系统提供以下内置样式:

样式说明平台支持
0automatic默认样式,由系统自动决定iOS 13+
1bordered带边框的按钮iOS 13+
2plain文本样式的按钮iOS 13+
3borderless无边框样式的按钮iOS 13+
4borderedProminent背景突出样式的按钮iOS 15+
5glassLiquid Glass 按钮iOS 26+
6glassProminentLiquid Glass 突出效果按钮iOS 26+
7link超链接样式macOS 10.15+
 1/// 应用到单个按钮
 2Button("提交") {
 3    submitAction()
 4}
 5.buttonStyle(.borderedProminent)
 6
 7/// 应用到容器(所有子按钮生效)
 8HStack {
 9    Button("按钮1") { }
10    Button("按钮2") { }
11}
12.buttonStyle(.bordered)

buttonBorderShape

实例方法:buttonBorderShape(_:)。该方法接收一个 ButtonBorderShape 结构体值,用于设置按钮的边框形状。注意:此修饰符仅影响使用 borderedborderedProminent 样式的按钮。

ButtonBorderShape 提供了以下形状选项:

形状说明平台支持
0automatic默认值,由系统根据上下文和平台自动决定合适的形状iOS 15+
1capsule胶囊形状(药丸形)iOS 15+
2circle圆形iOS 17+
3roundedRectangle圆角矩形(默认圆角半径)iOS 15+
4roundedRectangle(radius:)自定义圆角半径的圆角矩形iOS 15+
 1/// 应用到单个按钮
 2Button("按钮") { }
 3    .buttonStyle(.bordered)
 4    .buttonBorderShape(.capsule)
 5
 6/// 应用到多个按钮
 7HStack {
 8    Button("按钮1") { }
 9    Button("按钮2") { }
10}
11.buttonStyle(.borderedProminent)
12.buttonBorderShape(.roundedRectangle(radius: 20))

平台支持

平台最低版本
0iOS13.0+
1iPadOS13.0+
2Mac Catalyst13.0+
3macOS10.15+
4tvOS13.0+
5watchOS6.0+
6visionOS1.0+