Question

我是不熟悉flutter的人，我只想实现将两个小部件与动画交换，为实现这一目的，直到现在我已经使用 SlideTransition 并能够制作动画。

使用此方法我面临着几个问题

如何查找其他小部件的位置以交换当前小部件与其他人。
如何在小部件渲染之前设置动画的开始和结束。

我已经将代码放到了这篇文章中，需要大家的建议，还有其他有效的方法可以实现这一目标吗？？

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;
  bool status = false;
  String from = "From";
  String to = "To";

  void initState() {
    super.initState();
    _controller = new AnimationController(
        duration: const Duration(milliseconds: 246), vsync: this);

    _animation = new CurvedAnimation(
      parent: _controller,
      curve: new Interval(0.0, 1.0, curve: Curves.linear),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Swap Test"),
        ),
        body: new Center(
            child: new Column(
          children: <Widget>[
            new Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  SlideTransition(
                    position: new Tween<Offset>(
                      begin: Offset.zero,
                      end: const Offset(5.0, 0.0),
                    ).animate(_animation),
                    child: Text(
                      from,
                    ),
                  ),
                  SlideTransition(
                    position: new Tween<Offset>(
                      begin: Offset.zero,
                      end: const Offset(-5.0, 0.0),
                    ).animate(_animation),
                    child: Text(
                      to,
                    ),
                  ),
                ]),
            new RaisedButton(
              onPressed: () {
                if (!status) {
                  _controller.forward().whenComplete(() {
                    status = true;
                  });
                } else {
                  _controller.reverse().whenComplete(() {
                    status = false;
                  });
                }
              },
              textColor: Colors.white,
              color: Colors.red,
              padding: const EdgeInsets.all(8.0),
              child: new Text(
                "Swap",
              ),
            ),
          ],
        )));
  }
}

交换带有动画的小部件

0 个答案: