Flutter 中使用 RaiseButton 控件全宽颤动

在 Flutter 项目开发过程中，RaiseButton 是一个极其常用的控件，能够帮助我们实现很多交互操作。一些动态的 UI 细节，比如全宽颤动的效果，就需要在 RaiseButton 控件中设置。

设置 RaiseButton 颤动效果

RaiseButton 控件默认的颤动效果是跟着按下时的水波纹效果。如果我们需要全宽颤动的效果，需要在 RaiseButton 控件的外层再包一个 Container，然后在 Container 上设置动画。

import 'package:flutter/material.dart';

class ShakeButton extends StatefulWidget {
  final Function()? onPressed;
  final String label;
  final TextStyle? textStyle;
  final double minWidth;
  final double height;
  final EdgeInsetsGeometry padding;
  final ShapeBorder? shape;
  final Color backgroundColor;
  final Color splashColor;
  final Color? highlightColor;

  ShakeButton({
    Key? key,
    required this.onPressed,
    required this.label,
    this.textStyle,
    this.minWidth = 88.0,
    this.height = 36.0,
    this.padding = const EdgeInsets.symmetric(horizontal: 16.0),
    this.shape,
    this.backgroundColor = Colors.blue,
    this.splashColor = Colors.white,
    this.highlightColor,
  }) : super(key: key);

  @override
  _ShakeButtonState createState() => _ShakeButtonState();
}

class _ShakeButtonState extends State<ShakeButton>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(milliseconds: 120),
      vsync: this,
    );
    _animation = Tween(begin: -5.0, end: 5.0).animate(_controller)
      ..addStatusListener(
        (status) {
          if (status == AnimationStatus.completed) {
            _controller.reverse();
          } else if (status == AnimationStatus.dismissed) {
            _controller.forward();
          }
        },
      );
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: InkWell(
        onTap: widget.onPressed,
        child: Padding(
          padding: widget.padding,
          child: AnimatedBuilder(
            animation: _animation,
            child: Container(
              width: double.infinity,
              height: widget.height,
              decoration: BoxDecoration(
                color: widget.backgroundColor,
                borderRadius:
                    widget.shape as BorderRadius? ?? BorderRadius.circular(4.0),
              ),
              child: Center(
                child: Text(
                  widget.label.toUpperCase(),
                  style: widget.textStyle,
                ),
              ),
            ),
            builder: (BuildContext context, Widget? child) {
              return Transform.translate(
                offset: Offset(_animation.value, 0.0),
                child: child,
              );
            },
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

这里演示了如何创建一个 ShakeButton 组件，将需要变换的 RaiseButton 放在了 AnimatedBuilder 组件中，并且在每次点击的时候对 Tween 偏移量进行动画变换。

总结

在实现全宽颤动的 RaiseButton 控件中，我们需要使用 Flutter 中的动画和 Transform.translate 组件来实现。重点是要把 RaiseButton 捆绑在组件内，方便代码调用。以上代码可以直接在项目中使用，并根据需要进行修改和优化。