动画容器没有动画

Question

我有一个动画容器，从宽度和高度0开始，然后在setState (我在initState上调用)之后，每个容器被更改为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内部直接调用height=300，这意味着它将在第一次构建时获得height=300和width=300。

您可以使用addPostFrameCallback动画这一点，它将设置高度和宽度为300后，第一帧是建立。

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

另外，你也可以用

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

Answer 2

试试这个

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,
              ),
            ],
          )
        ],
      ),
    );
  }
}

这会很好的