Flutter 有多個獨立的 DragTarget 小部件

Question

我已經與 flutter 合作了幾個月，所以我還在學習。 我發現了一個類似的例子，我正在根據我的需要進行調整。

當我將一個形狀放入其中時，我需要在屏幕上有多個 DragTarget 小部件我不希望所有這些小部件只更新我放置形狀的那個。

家.dart

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(APP_BAR_TITLE),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          Provider.of<Data>(context).initializeDraggableList();
          Provider.of<Data>(context).changeSuccessDrop(false);
        },
        elevation: 20.0,
        label: Text('Reset'),
      ),
      body: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.only(top: 12.0),
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CardStackWidget(),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: DragTargetWidget(),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: DragTargetWidget(),
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: DragTargetWidget(),
              )
            ],
          ),
        ),
      ),
    );
  }
}

DragTargetWidget.dart

class DragTargetWidget extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return DragTarget(onWillAccept: (data) {
      return true;
    }, onAccept: (CardItem data) {
      if (Provider.of<Data>(context).itemsList.length >= 1) {
        Provider.of<Data>(context).removeLastItem();
        Provider.of<Data>(context).changeSuccessDrop(true);
        Provider.of<Data>(context).changeAcceptedData(data);
      }
    }, builder: (context, List<CardItem> cd, rd) {
      if (Provider.of<Data>(context).isSuccessDrop) {
        return Padding(
          padding: const EdgeInsets.all(25.0),
          child: Stack(
            children: buildTargetList(Provider.of<Data>(context).getAcceptedData),
          ),
        );
      } else {
        return Padding(
          padding: const EdgeInsets.all(25.0),
          child: DottedBorder(
            color: Colors.black,
            gap: 3,
            strokeWidth: 1,
            child: Container(
                height: 100.0,
                width: 100.0,
                color: Colors.grey[400],
                child: Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5)),
                  color: Colors.grey[400],
                  child: Center(
                    child: Text(
                      DROP_ITEMS_HERE,
                      style: TextStyle(color: Colors.black, fontSize: 22.0),
                    ),
                  ),
                )),
          ),
        );
      }
    });
  }

  List<Widget> buildTargetList(CardItem cardItem) {
    List<Widget> targetList = [];
    targetList.add(
      DottedBorder(
        gap: 3,
        strokeWidth: 1,
        color: Colors.black,
        child: Container(
          height: 100.0,
          width: 100.0,
          child: Card(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0)),
            color: cardItem.cardColor,
            child: Center(
                child: Text(
              '${cardItem.content}',
              style: TextStyle(fontSize: 25.0, color: WHITE_COLOR),
            )),
          ),
        ),
      ),
    );
    return targetList;
  }
}

將其中一個形狀拖放到任何 DropTarget 形狀中會更新所有這些形狀。 我不確定這是否是因為我對所有內容都使用相同的列表，或者是否是其他原因。

Answer 1

可能為時已晚，但似乎每個目標都從提供商那里獲得了有關其自身狀態的信息。 因此，當您刪除 object 時，提供者中的信息會發生變化，因為所有目標都依賴於該提供者，它們都會更改其狀態。

一種解決方案可能是不依賴提供者，而是將小部件轉換為有狀態的，並在小部件內部使用局部變量，這樣每個小部件都可以獨立