按钮#

在 Scripting 应用中，Button 组件允许您创建具有可自定义动作、标签、样式和角色的交互式元素。按钮可以触发动作、执行意图，并根据配置显示不同的视觉样式。本指南提供了关于如何使用 Button API 的详细说明，包括其属性、角色、样式及示例。

#Button

#描述

您可以通过提供一个 动作（action）或 意图（intent）以及一个 标签（label）来创建按钮。标签可以是简单的文本、图标或复杂的视图。按钮是创建交互界面的关键，例如提交表单或在页面之间导航。

#属性

#ButtonStyle

定义按钮的视觉外观。

#ButtonBorderShape

指定 bordered 或 borderedProminent 样式按钮的边框形状。

#ControlSize

定义按钮和其他控件的尺寸。

#CommonViewProps

这些属性可用于自定义视图中按钮的外观和行为。

#示例用法

#带动作的基础按钮

<Button title="Sign in" action={handleSignIn} />

#带系统图标的按钮

<Button title="Delete" systemImage="trash" role="destructive" action={handleDelete} />

#自定义标签按钮

<Button>
  <Text>Custom Label</Text>
</Button>

#执行 AppIntent 的按钮

<Button
  title="Start Workout"
  intent={MyStartWorkoutIntent({ duration: 30 })}
  buttonStyle="borderedProminent"
/>

#设置按钮样式

<Group
  buttonStyle="bordered"
  buttonBorderShape={{ roundedRectangleRadius: 8 }}
  controlSize="large"
>
  <Button title="Save" action={handleSave} />
</Group>

#注意事项

• 使用 role 指定具有特定用途的按钮，例如取消或危险操作按钮。
• 将 buttonStyle 和 buttonBorderShape 结合使用，为整个视图提供一致的主题。
• intent 属性将按钮与 Widget 和 LiveActivity 集成，实现无缝交互。

关于 AppIntent 的更多细节，请参阅 Interactive Widget and LiveActivity 文档。