TextButton 样式颤动

TextButton 是一个常见的组件，它用于显示一个可点击的文本。在 Flutter 中，TextButton 有一个很酷的功能，就是在用户点击它时会颤动。这个效果可以帮助用户更清楚地感受到他们的操作。

实现方法

要实现 TextButton 颤动的效果，我们需要将它包装在一个 InkWell 组件中。然后，我们需要指定一个 onTap 回调函数，这个函数会在用户点击按钮时被调用。

InkWell(
  onTap: () {
    // 处理点击事件
  },
  child: TextButton(
    child: Text('Button'),
    onPressed: null,
  ),
)

接下来，我们需要在 onTap 回调函数中添加一些代码，这些代码可以让 TextButton 导致颤动效果。这个效果可以通过调用 HapticFeedback 方法来实现。HapticFeedback 方法是 Flutter 中的一个内置方法，它会触发设备的触觉反馈。

import 'package:flutter/services.dart';

...

InkWell(
  onTap: () {
    HapticFeedback.mediumImpact(); // 添加颤动效果
    // 处理点击事件
  },
  child: TextButton(
    child: Text('Button'),
    onPressed: null,
  ),
)

效果演示

下面是一个 TextButton 的颤动效果演示，在用户点击按钮时会出现一个微小的震动动画。

总结

通过包装 TextButton 组件以实现颤动效果，可以大大提高用户在界面上的交互体验，同时也使得应用程序看起来更加生动有趣。在设计应用 UI 时，这个技巧可以帮助程序员更好地实现产品需求，提升应用软件的用户体验。