动画容器没有动画

Question

我有一个动画容器，它从宽度和高度 0 开始，然后在我调用 initState 的 setState 之后分别更改为 300。但它似乎没有动画。这是代码-

import 'package:flutter/material.dart';

class ChooseCardWidget extends StatefulWidget {
  const ChooseCardWidget({Key? key}) : super(key: key);

  @override
  State<ChooseCardWidget> createState() => ChooseCardWidgetState();
}

class ChooseCardWidgetState extends State<ChooseCardWidget> {
  double height = 0;
  double width = 0;
  final double roundedValue = 20;

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

  void startAnimation() {
    setState(() {
      height = 300;
      width = 300;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(seconds: 10),
      height: height,
      width: width,
      decoration: ShapeDecoration(
        shadows: const [
          BoxShadow(color: Colors.grey, blurRadius: 20, spreadRadius: 5)
        ],
        color: Colors.purple,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(roundedValue),
        ),
      ),
    );
  }
}

刚开始时宽度和高度均为 300。我该如何解决？谢谢！

Answer 1

您直接在 initState 中调用 startAnimation()，这意味着它将在第一次构建时获得 height=300 和 width=300。

您可以使用 addPostFrameCallback 对其进行动画处理，它会在构建第一帧后将高度和宽度设置为 300。

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      startAnimation();
    });
  }

此外，您可以使用

Future.delayed(Duration.zero, () {
      startAnimation();
    });

Answer 2

Try this

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: YourClass(),
      ),
    );
  }
}

class YourClass extends StatefulWidget {
  @override
  _YourClassState createState() => _YourClassState();
}

class _YourClassState extends State<YourClass> {
  double loginWidth = 40.0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: PageView(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              RaisedButton (
                child: Text('Animate!'),
                onPressed: () {
                  setState(() {
                    loginWidth = 250.0;
                  });
                },
              ),
              AnimatedContainer (
                duration: Duration (seconds: 1),
                width: loginWidth,
                height: 40,
                color: Colors.red,
              ),
            ],
          )
        ],
      ),
    );
  }
}

这将非常有效

动画容器没有动画

Animated Container not animating

flutter

flutter-animation