Flutter具有多个独立的DragTarget小部件

时间:2020-02-17 03:50:29

标签: flutter widget

我已经在颤抖了几个月,所以我还在学习。我找到了一个类似的例子,可以根据自己的需要进行调整。

当我将形状拖放到其中时,我需要在屏幕上有多个DragTarget小部件,我不希望所有这些部件仅更新放置形状的那个。

Home.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;
  }
}

Dropping a shape to one DropTarget

Every DropTarget shapes updates

拖放任何DropTarget形状中的一个形状会更新所有形状。我不确定这是否是因为我对所有内容都使用相同的列表,或者是否有其他用途。

0 个答案:

没有答案