©️ 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 结构体提供了按钮用途的描述。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)

添加到容器中