在小部件加载颤动时触发动画

Question

所以，我的小部件树中有一个 AnimatedPositioned 小部件，其中包含一个表单。当用户导航到屏幕时，我希望 AnimatedPositioned 小部件从底部向上滑动。现在，有许多教程展示了当用户使用setState 方法单击按钮时如何执行此操作。但是如何在加载此屏幕时自动触发呢？

Answer 1

做到这一点的“正确”方法是不使用像AnimatedPositioned 这样的隐式动画小部件，而是使用显式动画。在 initState 的 StatefulWidget 中开始 AnimationController。

但从技术上讲，您可以在Future 中为您的AnimatedPositioned 小部件设置“目标”值，以便该值在下一帧发生变化。您尝试移除 Future 以查看否则小部件会在其结束位置呈现。

这种方式不推荐，但可行：

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  double _dist = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(children: [
        AnimatedPositioned(
          child: Text('Hello Words'),
          duration: Duration(seconds: 5),
          left: _dist,
          top: _dist,
        ),
      ]),
    );
  }

  @override
  initState() {
    super.initState();
    Future(() {
      setState(() {
        _dist = 250.0;
      });
    });
  }
}