Flutter 可拖动小部件的反馈属性未设置动画

我需要在小部件处于运动状态时为其设置动画。动画取决于正在拖动的小部件的全局位置坐标。我使用了一个

侦听器

来获取手指点击位置，但问题是

可拖动

小部件的

反馈

小部件没有使用

设置状态

进行更新。我找到了链接，但没有一个有用。 下面是演示我的问题的代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  double x = 0, y = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Listener(
        onPointerMove: (opm) {
          setState(() {
            x = opm.position.dx;
            y = opm.position.dy;
          });
          print('(${x.floor()}, ${y.floor()})');
        },
        child: Center(
          child: Draggable(
            childWhenDragging: Container(),
            child: Container(
              height: 150,
              width: 150,
              color: Colors.red,
            ),
            feedback: Material(
              child: Container(
                height: 150,
                width: 150,
                color: Colors.blue,
                child: Center(child: Text('(${x.floor()}, ${y.floor()})')),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
视觉密度：视觉密度。自适应平台密度，
),
主页：MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
双x=0，y=0；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
主体：听者(
onPointerMove：（opm）{
设置状态（）{
x=opm.position.dx；
y=opm.position.dy；
});
打印（“（${x.floor（）}，${y.floor（）}”）；
},
儿童：中心(
孩子：拖拉(
ChildWhenDraging:容器（），
子：容器(
身高：150，
宽度：150，
颜色：颜色，红色，
),
反馈：材料(
子：容器(
身高：150，
宽度：150，
颜色：颜色，蓝色，
child:Center（child:Text（“（${x.floor（）}，${y.floor（）}）”），
),
),
),
),
),
);
}
}

---

在这种情况下，蓝色屏幕内显示的坐标应该是动画，但即使在执行

setState

之后，它们也不会更新。我尝试使用

AnimatedBuilder

，但没有什么不同。如果有人能为我提供一些帮助或替代方法，用

Draggable

小部件来实现这一点，那将非常有帮助。

我不完全理解这一部分，但在的帮助和一些文档的帮助下，我能够使用以下代码实现这一动画

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  double x = 0, y = 0;

  AnimationController _controller;

  Animation animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
    animation = Tween(begin: 0, end: 100).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Listener(
        onPointerMove: (opm) {
          setState(() {
            x = opm.position.dx;
            y = opm.position.dy;
            _controller.value = 0;
          });
          print('(${x.floor()}, ${y.floor()})');
        },
        child: Center(
          child: Draggable(
            childWhenDragging: Container(),
            child: Container(
              height: 150,
              width: 150,
              color: Colors.red,
            ),
            feedback: AnimatedBuilder(
              animation: animation,
              builder: (_, __) {
                return Material(
                  child: Container(
                    height: 150,
                    width: 150,
                    color: Colors.blue,
                    child: Center(child: Text('(${x.floor()}, ${y.floor()})')),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
视觉密度：视觉密度。自适应平台密度，
),
主页：MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态
使用SingleTickerProviderStateMixin{
双x=0，y=0；
动画控制器_控制器；
动画；
@凌驾
void initState（）{
super.initState（）；
_控制器=动画控制器（vsync:this）；
动画=Tween（开始：0，结束：100）；
}
@凌驾
无效处置（）{
_controller.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
主体：听者(
onPointerMove：（opm）{
设置状态（）{
x=opm.position.dx；
y=opm.position.dy；
_controller.value=0；
});
打印（“（${x.floor（）}，${y.floor（）}”）；
},
儿童：中心(
孩子：拖拉(
ChildWhenDraging:容器（），
子：容器(
身高：150，
宽度：150，
颜色：颜色，红色，
),
反馈：动画生成器(
动画：动画，
建筑商：（uu，uuu）{
退货(
子：容器(
身高：150，
宽度：150，
颜色：颜色，蓝色，
child:Center（child:Text（“（${x.floor（）}，${y.floor（）}）”），
),
);
},
),
),
),
),
);
}
}

---

如果您有更好的方法，或者您想添加一些额外的信息或解释，请发表评论。

我尝试了

AnimatedBuilder

，效果很好，但可能是我在尝试使用它时犯了一些错误。你能分享你的代码版本吗？

反馈：AnimatedBuilder（…）

-顺便说一句

ValueListenableBuilder

也应该可以，但我没有尝试过，如果你的解决方案有效，那么请你将其作为答案发布，以便我可以验证并标记为正确的解决方案？这是一个快速修复，我已经删除了代码-只需将

作为
AnimatedBuilder
进行反馈即可
Material>Container>Center>Text
而不是
AnimationController
使用
ValueNotifier
，然后删除
setState
，只需使用
notifier.value=opm.position
-在这种情况下，最好使用
ValueListenableBuilder
，我无法尝试该部分。我会尽快给你答复。