SwiftUI Button

按钮控件
iOS 13.0+iPadOS 13.0+macOS 10.15+Mac Catalyst 13.0+tvOS 13.0+watchOS 6.0+

您可以通过提供操作和标签来创建按钮。 动作是一种方法或闭包属性,当用户单击或点击按钮时会执行某些操作。 标签是描述按钮操作的视图——例如,通过显示文本、图标或两者兼而有之:

Button(action: signIn) {
    Text("Sign In")
}

对于纯文本标签的常见情况,您可以使用将标题字符串或 LocalizedStringKey 作为其第一个参数的便捷初始化程序,而不是尾随闭包:

Button("Sign In", action: signIn)

用户激活按钮的方式因平台而异:

  • 在 iOS 和 watchOS 中,用户点击按钮。
  • 在 macOS 中,用户单击按钮。
  • 在 tvOS 中,用户在关注按钮的同时按下外部遥控器(如 Siri Remote)上的“选择”。

按钮的外观取决于您放置它的位置、是否为它分配角色以及如何设置它的样式等因素。

向容器添加按钮

对启动操作的任何用户界面元素使用按钮。 按钮会自动调整其视觉样式以匹配这些不同容器和上下文中的预期样式。 例如,要创建一个在用户选择时启动操作的列表单元格,请在列表的内容中添加一个按钮:

List {
    // Cells that show all the current folders.
    ForEach(folders) { folder in
        Text(folder.title)
    }

    // A cell that, when selected, adds a new folder.
    Button(action: addItem) {
        Label("Add Folder", systemImage: "folder.badge.plus")
    }
}
四个项目列表的屏幕截图

同样,要创建一个启动操作的上下文菜单项,请将一个按钮添加到 contextMenu(_:) 修饰符的内容闭包:

.contextMenu {
    Button("Cut", action: cut)
    Button("Copy", action: copy)
    Button("Paste", action: paste)
}
上下文菜单的屏幕截图,其中包含三个项目剪切、复制、粘贴

这种模式扩展到 SwiftUI 中的大多数其他容器视图,它们具有可自定义的交互式内容,例如 Form 实例。

分配角色

您可以选择使用表征按钮用途的 ButtonRole 来初始化按钮。 例如,您可以为删除操作创建破坏性按钮:

Button("Delete", role: .destructive, action: delete)

系统使用按钮的角色在每个上下文中适当地设置按钮的样式。 例如,上下文菜单中的破坏性按钮显示为红色前景色:

上下文菜单的屏幕截图,其中包含四个项目剪切、复制、粘贴、删除

如果您没有为按钮指定角色,系统将应用适当的默认外观。

按钮样式

您可以使用标准按钮样式之一自定义按钮样式,比如 bordered (边框),使用 buttonStyle(_:) 修饰符应用该样式:

HStack {
    Button("Sign In", action: signIn)
    Button("Register", action: register)
}
.buttonStyle(.bordered)

如果将样式应用于容器视图,如上例所示,容器中的所有按钮都使用该样式:

两个按钮并排的屏幕截图,每个按钮都有一个胶囊形

您还可以创建自定义样式。 要添加具有标准交互行为的自定义外观,请创建符合 ButtonStyle 协议的样式。 要自定义外观和交互行为,请创建符合 PrimitiveButtonStyle 协议的样式。 自定义样式还可以读取按钮的角色并使用它来调整按钮的外观。