滑动即可显示

允许用户通过滑动组件来显示额外的操作。

借助滑动显示组件,您可以向条状标签和卡片添加额外的操作,特别是当它们显示在列表中时。该组件可让用户快速完成任务,而无需离开屏幕。

用户可以向左部分滑动条状标签和卡片来访问这些操作,然后点按相应操作来完成操作。用户还可以向左滑动条状标签和卡片,以快速执行主要操作。

该组件有 2 个用于执行这些操作的槽位:

  1. 主要
  2. 次要(可选)

解剖学

显示的操作

开发者可以根据自己的独特用例自定义操作。请考虑在这些操作中使用的颜色和图标,以帮助用户理解它们的含义。

对于所有语言语言区域,显示的操作都会在同一侧面显示。

  1. 主要操作
  2. 次要操作(可选)

执行主要操作

如需执行主要操作,用户可以点按该按钮或继续向左滑动。这样一来,该按钮就会延伸到屏幕的整个宽度并显示标签。该操作在被选中后会淡出。

第一个示例展示了单按钮选项。第二个示例展示了双按钮选项

撤消操作

对于破坏性操作,请添加“撤消”组件,以便用户撤消这些操作。为主要操作添加撤消功能。

添加后,系统会显示撤消条状标签按钮来代替已提交的操作。不久后,撤消操作会逐渐消失,系统随即会完成已提交的操作。

滑动阈值

用于显示组件行为的滑动操作取决于用户在屏幕上滑动的距离:

  • 如果用户在屏幕上滑动的距离不到 50%,该组件会弹回其起始位置,并且不执行任何操作。
  • 如果用户在屏幕全宽的 50% 到 75% 之间滑动,该组件会保持部分可见状态,并显示与该组件相关联的操作。
  • 如果用户在屏幕上的滑动区域超过 75%,该组件会消失,系统会自动执行主要操作。

以下以 Material 为主题的组件可实现滑动以显示行为:

在卡片上

以下屏幕截图显示了使用 SwipeToRevealCard 类时通过滑动以显示组件的外观:

条状标签

以下屏幕截图显示了使用 SwipeToRevealChip 类时通过滑动以显示组件的外观: