如何在颤动中更改高架按钮的背景颜色 - Dart

在开发移动应用程序时，我们经常需要改变按钮的背景颜色以反映用户的反应或状态。在Dart语言中，可以使用动画来平滑地更改高架按钮的背景颜色。

步骤1：导入需要的包

首先，我们需要导入一些必要的包：

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

步骤2：定义颤动动画

接下来，我们需要定义一个颤动动画，以便在更改按钮背景颜色时使用。

class ShakeCurve extends Curve {
  @override
  double transformInternal(double t) {
    return sin(t * pi * 2);
  }
}

这里使用了 Sin 函数，它将 t 值转换为 -1（左极限）到 1（右极限）之间的值，以创建一个颤动效果。

步骤3：创建一个具有高架效果的按钮

接下来，我们将创建一个具有高架效果的按钮：

ElevatedButton(
  onPressed: () {
    // 在这里添加按钮点击事件代码
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.green,
    elevation: 8.0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20.0)),
  ),
  child: Text('按钮文本'),
),

这将创建一个绿色按钮，并设置按钮文本。此外，按钮具有8的高架值。您可以根据需要更改这个值。

步骤4：定义按钮颜色

接下来，我们将定义按钮的颜色，以便在颤动时更改颜色。

Color _buttonColor = Colors.green;

这里定义了一个 _buttonColor 变量，它默认设置为绿色。

步骤5：更改按钮颜色

最后，我们将在按钮点击时更改按钮颜色。

  onPressed: () {
    setState(() {
      _buttonColor = Colors.red;
    });

    // 在300毫秒后再改为原始颜色
    timeDilation = 2.0;
    SchedulerBinding.instance.addPostFrameCallback((_) {
      setState(() {
        _buttonColor = Colors.green;
      });
      timeDilation = 1.0;
    });
  },

在点击按钮后，我们将颜色更改为红色，然后使用 addPostFrameCallback 函数将颜色更改回原来的颜色（绿色）。这里使用 timeDilation 函数来减慢颜色过渡速度，使颤动效果更加明显。

完整代码

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shaking Elevated Button',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shaking Elevated Button'),
        ),
        body: Center(
          child: ShakingButton(),
        ),
      ),
    );
  }
}

class ShakingButton extends StatefulWidget {
  @override
  _ShakingButtonState createState() => _ShakingButtonState();
}

class _ShakingButtonState extends State<ShakingButton> with SingleTickerProviderStateMixin {
  Color _buttonColor = Colors.green;

  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(duration: Duration(milliseconds: 300), vsync: this);
    _animation = CurvedAnimation(parent: _animationController, curve: ShakeCurve());

    _animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _animationController.reverse();
      }
    });

    _animationController.addListener(() {
      setState(() {
        if (_animationController.value < 0.5) {
          _buttonColor = Color.lerp(Colors.green, Colors.red, _animation.value * 2);
        } else {
          _buttonColor = Color.lerp(Colors.red, Colors.green, _animation.value * 2 - 1);
        }
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        if (_animationController.isAnimating) {
          return;
        }

        _animationController.forward();
        setState(() {
          _buttonColor = Colors.red;
        });
        // 在300毫秒后再改为原始颜色
        timeDilation = 2.0;
        SchedulerBinding.instance.addPostFrameCallback((_) {
          setState(() {
            _buttonColor = Colors.green;
          });
          timeDilation = 1.0;
        });
      },
      style: ElevatedButton.styleFrom(
        primary: _buttonColor,
        elevation: 8.0,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0)),
      ),
      child: Text('按钮文本'),
    );
  }
}

class ShakeCurve extends Curve {
  @override
  double transformInternal(double t) {
    return sin(t * pi * 2);
  }
}

该代码将创建一个具有颤动效果的高架按钮。您可以根据需要调整按钮的参数。