Flutter-可拖动小部件的反馈无法正确设置动画 [英] Flutter - Feedback of Draggable widget does not animate properly

问题描述

按住或拖动AnimatedIcon小部件时，它会移动到屏幕的左上角(不是有意的).它最初从屏幕中心开始，并在释放时返回相同位置.任何帮助将不胜感激.

The AnimatedIcon widget, when holding/dragging it, teleports to the top-left hand of the screen(not intentional). It initially starts at the centre of the screen and returns to same position when it is released. Any help would be greatly appreciated.

>注意:由于它是GIF格式，因此在这里看起来不太平滑.

这是我的代码:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  // This widget is the root of your application.
  @override
  void initState(){
    super.initState();
    SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft,
    ]);
  }

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Element(name: 'Fire'),
        )
      )
    );
  }
}

class AnimatedIcon extends AnimatedWidget {

  static final sizeTween = Tween<double>(begin: 80.0, end: 200.0);
  static final marginTween = Tween<double>(begin: 0.0, end: 5.0);

  AnimatedIcon({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Center(
      child: Container(
        margin: EdgeInsets.only(top: marginTween.evaluate(animation), left: marginTween.evaluate(animation)),
        height: sizeTween.evaluate(animation),
        width: sizeTween.evaluate(animation),

        color: Colors.blue,
      ),
    );
  }
}


class Element extends StatefulWidget {
  final String name;
  Element({Key key, @required this.name}) : super(key: key);

  ElementState createState() => ElementState();
}

class ElementState extends State<Element> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation, animationSize;

  void initState() {
    super.initState();
    controller = AnimationController(duration: Duration(milliseconds: 3000), vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Draggable<String>(
      data: widget.name,

      child: AnimatedIcon(animation: controller),
      childWhenDragging: Container(),
      onDragStarted: () => {
        setState(() {
          controller.forward();
        })
      },
      feedback: AnimatedIcon(animation: controller),
      onDragEnd: (details) => {
        setState(() {
          controller.reverse();
        })
      },

    );
  }
}

推荐答案

Removing Center()有助于传送

Removing Center() helped with teleporting

  Widget build(BuildContext context) {
    final animation = listenable as Animation<double>;
    return Container(
      margin: EdgeInsets.only(
          top: marginTween.evaluate(animation),
          left: marginTween.evaluate(animation)),
      height: sizeTween.evaluate(animation),
      width: sizeTween.evaluate(animation),
      color: Colors.blue,
    );
  }

这篇关于Flutter-可拖动小部件的反馈无法正确设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！