尝试为 ElevatedButton 设置动画时出现此错误

Question

我目前正在尝试为 elevatedButton 制作动画，只是尝试为 elevatedButton 制作动画并没有什么特别的属性。所以我在 VS 代码中构建了一个新的 flutter starter 应用程序，并添加了动画和动画控制器的相关代码，但是我一直收到这个错误：type 'double' is not a subtype of type 'MaterialStateProperty? ' 我不明白为什么，这是我的代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  AnimationController animationController;
  Animation animation;

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

      animationController = AnimationController(
        vsync: this,
        duration: Duration(seconds: 5),
      );

      animation = Tween(begin: 50.0, end: 150.0).animate(
        CurvedAnimation(
          parent: animationController, 
          curve: Interval(0.0, 1.0, curve: Curves.easeInOut),
        ),
      );
  }

  @override void dispose() {
      animationController.dispose();

      super.dispose();
    }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: (){
                animationController.forward();
              }, 
              child: Text("Button Text"),
              style: ButtonStyle(
                elevation: animation.value,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Answer 1

根据 ButtonStyle 文档：

Many of the ButtonStyle properties are MaterialStateProperty objects which resolve to different values depending on the button's state. For example the Color properties are defined with MaterialStateProperty and can resolve to different colors depending on if the button is pressed, hovered, focused, disabled, etc.

所以您需要做的是将 animation value 作为 MaterialStateProperty 传递。

在你的情况下它看起来像这样：

style: ButtonStyle(  
  elevation: MaterialStateProperty.all(animation.value), 
),

查看 MaterialStateProperty Class 文档以获取更多信息。

Answer 2

尝试使用 MaterialStateProperty.all<double>(animation.value), 按钮样式

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {

  AnimationController animationController;
  Animation animation;

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

    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 5),
    );

    animation = Tween(begin: 50.0, end: 150.0).animate(
      CurvedAnimation(
        parent: animationController,
        curve: Interval(0.0, 1.0, curve: Curves.easeInOut),
      ),
    );
  }

  @override void dispose() {
    animationController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: (){
                animationController.forward();
              },
              child: Text("Button Text"),
              style: ButtonStyle(
// here you will change the `MaterialStateProperty` value 
                elevation: MaterialStateProperty.all<double>(animation.value),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

尝试为 ElevatedButton 设置动画时出现此错误

Getting This Error When Trying To Animate An ElevatedButton

dart

flutter

flutter-animation