Question

我有一个页面过渡动画，其中所有元素都向上移动（向上滑动），然后转到SearchPage ...

@override
  void initState() {

    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
    offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, -2.0))
        .animate(controller);

    offset2 = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, -1.0))
        .animate(controller);
  }

然后点击按钮，我会触发该动画并移至另一页面：

Navigator.push( context, MaterialPageRoute(builder: (context) => SearchPage()),;

但是，我想在按下后退按钮时从首页（HomePage( )）重置动画。

如何从controller获取此SearchPage属性？可能我必须做controller.reset()还是有另一种方法？

Answer 1

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offset;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    _offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, -10.0)).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Page 1")),
      body: Center(
        child: SlideTransition(
          position: _offset,
          child: RaisedButton(
            onPressed: () async {
              await _controller.forward();
              Navigator.push(context, MaterialPageRoute(builder: (_) => Page2())).then(
                (_) => _controller.reverse(), // this is all you need, you can also use reset here
              );
            },
            child: Text("Navigate"),
          ),
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(context) => Scaffold(appBar: AppBar(title: Text("Page 2")));
}

从上一页重置动画

1 个答案: