如何在拖动时更新可拖动反馈小部件？

Question

我正在开发一个游戏，需要在拖动部件时点击按钮，该按钮应该会对用户当前拖动的反馈部件进行一些更改。childWhenDragging可以更新，但是在拖动过程中反馈部件没有更新。是否有任何方法可以实现这一点？

以下是用于重现此问题的基本示例。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Draggable Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int counter;

  @override
  void initState() {
    this.counter = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draggable Test'),
      ),
      body: Column(
        children: <Widget>[
          Draggable(
            child: Container(
              color: Colors.red,
              width: 100,
              height: 100,
              child: Text(counter.toString()),
            ),
            feedback: Container(
              color: Colors.red,
              width: 100,
              height: 100,
              child: Text(counter.toString()),
            ),
            childWhenDragging: Container(
              color: Colors.red,
              width: 100,
              height: 100,
              child: Text(counter.toString()),
            ),
          ),
          RaisedButton(
            onPressed: () {
              setState(() {
                counter += 1;
              });
            },
            child: Text("plus"),
          )
        ],
      ),
    );
  }
}

我希望反馈小部件能够呈现正确的计数器值，但它从未更新。

- emil mannfeldt

---

我认为这个答案可以帮到你，即使问题略有不同。在你的情况下，使用StreamBuilder应该可以解决问题。 - Magnus

Answer 1

这种行为是由可拖动小部件的实际实现结果造成的。 请查看以下来自flutter/lib/src/widgets/drag_target的代码：

_DragAvatar({
    required this.overlayState,
    this.data,
    this.axis,
    required Offset initialPosition,
    this.dragStartPoint = Offset.zero,
    this.feedback,
    this.feedbackOffset = Offset.zero,
    this.onDragUpdate,
    this.onDragEnd,
    required this.ignoringFeedbackSemantics,
    required this.ignoringFeedbackPointer,
  }) : assert(overlayState != null),
       assert(ignoringFeedbackSemantics != null),
       assert(ignoringFeedbackPointer != null),
       assert(dragStartPoint != null),
       assert(feedbackOffset != null),
       _position = initialPosition {
    _entry = OverlayEntry(builder: _build);
    overlayState.insert(_entry!);
    updateDrag(initialPosition);
  }

_entry 是显示的 feedback Widget。仔细观察可以发现它实际上是一个覆盖层！（参见 OverlayEntry）

因此，通过 setState 更新应用程序的当前状态时，“应用程序小部件”的上下文会按预期更新。但是反馈小部件所在的覆盖层不属于“应用程序小部件上下文”。

为了更新反馈小部件，可以执行以下操作：

1. 将反馈小部件设置为独立的 StatefulWidget
2. 将主状态更改传递给反馈小部件

根据框架等不同的方式，可以以不同的方式传递状态。 为了保持简单，以下示例使用 GlobalKey 访问反馈小部件。

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late int counter;

  /// GlobalKey to access CountContainer later
  final GlobalKey _counterKey = GlobalKey();

  @override
  void initState() {
    counter = 0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draggable Test'),
      ),
      body: Column(
        children: <Widget>[
          Draggable(
            /// Set feedback widget as CountContainer with the GlobalKey
            feedback: CountContainer(
              initialCount: counter,
              key: _counterKey,
            ),
            childWhenDragging: Container(
              color: Colors.red,
              width: 100,
              height: 100,
              child: Text(counter.toString()),
            ),
            child: Container(
              color: Colors.red,
              width: 100,
              height: 100,
              child: Text(counter.toString()),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              setState(() {
                counter += 1;
                // pass update to CountContainer
                (_counterKey.currentState as _CountContainerState).updateCount(counter);
              });
            },
            child: Text("plus"),
          )
        ],
      ),
    );
  }
}

class CountContainer extends StatefulWidget
{
  final int initialCount;
  const CountContainer({Key? key, required this.initialCount}) : super(key: key);

  @override
  State<CountContainer> createState() => _CountContainerState();
}

class _CountContainerState extends State<CountContainer>
{
  late int count = widget.initialCount;

  @override
  Widget build(BuildContext context)
  {
    return Container(
      color: Colors.red,
      width: 100,
      height: 100,
      child: Text(count.toString()),
    );
  }

  /// This function gets called by MyHomePage.
  void updateCount(int newCount)
  {
    setState(() {
      count = newCount;
    });
  }
}

这样状态就会传递到反馈组件并正确更新。

- Fabian