Flutter: 动作反馈

写在前面

在 Android 或 iOS 设备上,系统会对提供声音或是震动的反馈来帮助我们让用户在进行一些操作时,起到一个告知用户这个操作是有效的作用。本篇主要是总结在 Flutter 上,如何使用这些功能。

内容

Feedback

一般我们使用 GestureDetector都会用到它的 onTaponLongTap方法,此时我们可以借助 FeedBack类来帮助我们添加特定平台的反馈。

class WidgetWithWrappedHandler extends StatelessWidget {
  const WidgetWithWrappedHandler({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: Feedback.wrapForTap(_onTapHandler, context),
      onLongPress: Feedback.wrapForLongPress(_onLongPressHandler, context),
      child: const Text('X'),
    );
  }

  void _onTapHandler() {
    // Respond to tap.
  }

  void _onLongPressHandler() {
    // Respond to long press.
  }
}

根据目前官方文档里 Feedback方法的介绍,在 Android 上,点按操作会播放点击系统声音,长按的话会有震动反馈。而在 iOS 则不会有反馈,因为 iOS 里通常对这两个操作不会有响应。

Feedback还提供了另外两个方法forTapforLongPress,以进一步帮助我们在反馈上做多一些其它的工作,例如判断这个操作是否有一些其它条件具备了,才去执行反馈。

class WidgetWithExplicitCall extends StatelessWidget {
  const WidgetWithExplicitCall({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // Do some work (e.g. check if the tap is valid)
        Feedback.forTap(context);
        // Do more work (e.g. respond to the tap)
      },
      onLongPress: () {
        // Do some work (e.g. check if the long press is valid)
        Feedback.forLongPress(context);
        // Do more work (e.g. respond to the long press)
      },
      child: const Text('X'),
    );
  }
}

HapticFeedback

在 Flutter 的 services 包里,有一个 HapticFeedback类,里面提供了几个静态方法,用于提供震动反馈:

class HapticFeedback {
  static Future<void> vibrate();
  static Future<void> lightImpact();
  static Future<void> mediumImpact();
  static Future<void> heavyImpact();
  static Future<void> selectionClick();
}

这些方法也是 Flutter 的一些官方组件里所用到的,例如下拉刷新,时间选择器里调节时间等。

参考

Feedback class
HapticFeedback class
【Flutter 小知识】震动反馈 HapticFeedback

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值