Flutter 使用堆栈中拖动的小部件更新所有附加的小部件

考虑一堆小部件，如图所示。我们可以看到索引0小部件附加了索引1、2、3、4小部件。。。；索引3小部件附带索引4小部件，索引4小部件不附带任何人

现在，当我拖动一个小部件时，所有附加的小部件也应随之拖动
i、 e.如果我尝试拖动Index2小部件，则拖动的小部件应该是Index2、3、4小部件的堆栈
如果我尝试拖动index 4小部件，则拖动的小部件应该只是index 4小部件

现在我知道我可以在标记可拖动的类的参数时，使用反馈和孩子来处理拖动小部件的更新，但我不知道如何使用它更新所有其他附加的小部件

这是我的密码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}


class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<BlockWidget> blockWidgets;
  final List<Color> widgetColors = [Colors.red, Colors.brown, Colors.black, Colors.pink, Colors.grey];

  @override
  void initState() {
    super.initState();

    blockWidgets = new List();
    for(int i=0; i < widgetColors.length; i++) {
      blockWidgets.add(BlockWidget(widgetId: i, widgetColor: widgetColors.elementAt(i)));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('AppBar'),
      ),
      body: WidgetStacks(
        blocks: blockWidgets,
      ),
    );
  }
}


const blockHeight = 100.0;
const blockWidth = 100.0;

class BlockWidget {
  int widgetId;
  Color widgetColor;

  BlockWidget({
    @required this.widgetId,
    @required this.widgetColor,
  });
}


class TransformedWidget extends StatefulWidget {
  final BlockWidget block;
  final int stackIndex;
  final List<BlockWidget> attachedBlocks;

  TransformedWidget(
      {@required this.block,
        @required this.stackIndex,
        @ required this.attachedBlocks,
      });

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

class _TransformedWidgetState extends State<TransformedWidget> {
  @override
  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.identity()
        ..translate(
          widget.stackIndex * (blockHeight / 2),
          widget.stackIndex * (blockWidth / 2),
          0.0,
        ),
      child: Draggable<Map>(
        child: _buildBlock(),
        feedback: WidgetStacks(
          blocks: widget.attachedBlocks,
        ),
        childWhenDragging: Container(),
      ),
    );
  }

  Widget _buildBlock() {
    return Container(
      height: blockHeight,
      width: blockWidth,
      color: widget.block.widgetColor,
      alignment: Alignment.centerLeft,
      child: Text(
        widget.block.widgetId.toString(),
        style: TextStyle(
          fontSize: 30.0,
          color: Colors.white,
        ),
      ),
    );
  }
}


class WidgetStacks extends StatefulWidget {
  final List<BlockWidget> blocks;

  WidgetStacks({@required this.blocks});

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

class _WidgetStacksState extends State<WidgetStacks> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 5 * blockHeight,
      width: 5 * blockWidth,
      margin: EdgeInsets.all(2.0),
      child: Stack(
        children: widget.blocks.map((block) {
          int index = widget.blocks.indexOf(block);
          return TransformedWidget(
            block: block,
            stackIndex: index,
            attachedBlocks: widget.blocks.sublist(index),
          );
        }).toList(),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（），
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
列出区块小部件；
最终列表WidgetColor=[Colors.red，Colors.brown，Colors.black，Colors.pink，Colors.grey]；
@凌驾
void initState（）{
super.initState（）；
blockWidgets=新列表（）；
对于（int i=0；i_TransformedWidgetState（）；
}
类_TransformedWidgetState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回变换(
转换：Matrix4.identity（）
…翻译(
widget.stackIndex*（块高/2），
widget.stackIndex*（块宽度/2），
0.0,
),
孩子：拖拉(
子项：_构建块（），
反馈：WidgetStacks(
块：widget.attachedBlocks，
),
ChildWhenDraging:容器（），
),
);
}
小部件_buildBlock（）{
返回容器(
高度：块高，
宽度：块宽度，
颜色：widget.block.widgetColor，
对齐：alignment.centerLeft，
子：文本(
widget.block.widgetId.toString（），
样式：TextStyle(
字体大小：30.0，
颜色：颜色，白色，
),
),
);
}
}
类WidgetStacks扩展StatefulWidget{
最后的列表块；
WidgetStacks（{@required this.blocks}）；
@凌驾
_WidgetStacksState createState（）=>\u WidgetStacksState（）；
}
类_WidgetStacksState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回容器(
高度：5*块高，
宽度：5*块宽，
边距：所有边集（2.0），
子：堆栈(
子项：widget.blocks.map（（块）{
int index=widget.blocks.indexOf（block）；
返回TransformedWidget(
街区：街区，
stackIndex:index，
attachedBlocks:widget.blocks.sublist（索引），
);
}).toList（），
),
);
}
}

您应该将回调（onDragStart、onDragEnd）传递给TransformedWidget，以获得有关拖动事件的通知

基于回调，您应该重建您的父窗口小部件，在您的情况下，它是WidgetStacks

以下是工作代码，供您参考：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<BlockWidget> blockWidgets;
  final List<Color> widgetColors = [
    Colors.red,
    Colors.brown,
    Colors.black,
    Colors.pink,
    Colors.grey
  ];

  @override
  void initState() {
    super.initState();

    blockWidgets = new List();
    for (int i = 0; i < widgetColors.length; i++) {
      blockWidgets.add(
          BlockWidget(widgetId: i, widgetColor: widgetColors.elementAt(i)));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('AppBar'),
      ),
      body: WidgetStacks(
        key:ValueKey('WidgetStacks_${blockWidgets.length}'),
        blocks: blockWidgets,
      ),
    );
  }
}

const blockHeight = 100.0;
const blockWidth = 100.0;

class BlockWidget {
  int widgetId;
  Color widgetColor;

  BlockWidget({
    @required this.widgetId,
    @required this.widgetColor,
  });
}

class TransformedWidget extends StatefulWidget {
  final BlockWidget block;
  final int stackIndex;
  final List<BlockWidget> attachedBlocks;
  final Function() onDragCanceled;
  final Function() onDragStart;

  TransformedWidget({
    Key key,
    @required this.block,
    @required this.stackIndex,
    @required this.attachedBlocks, this.onDragCanceled, this.onDragStart,
  }):super(key: key);

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

class _TransformedWidgetState extends State<TransformedWidget> {
  @override
  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.identity()
        ..translate(
          widget.stackIndex * (blockHeight / 2),
          widget.stackIndex * (blockWidth / 2),
          0.0,
        ),
      child: Draggable<Map>(
        key: ValueKey(widget.stackIndex),
        onDragStarted: ()=>widget.onDragStart(),
        onDraggableCanceled: (_,__)=>widget.onDragCanceled(),
        child: _buildBlock(),
        feedback: WidgetStacks(
          key: ValueKey('WidgetStacks_${widget.attachedBlocks.length}'),
          blocks: widget.attachedBlocks,
        ),
        childWhenDragging: Container(),
      ),
    );
  }

  Widget _buildBlock() => Material(
          child: Container(
        height: blockHeight,
        width: blockWidth,
        color: widget.block.widgetColor,
        alignment: Alignment.centerLeft,
        child: Text(
          widget.block.widgetId.toString(),
          style: TextStyle(
            fontSize: 30.0,
            color: Colors.white,
          ),
        ),
      ),
    );
}

class WidgetStacks extends StatefulWidget {
  final List<BlockWidget> blocks;

  WidgetStacks({@required this.blocks, Key key}):super(key:key);

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

class _WidgetStacksState extends State<WidgetStacks> {
  ValueNotifier<List<BlockWidget>> blocksToBeShownNotifier;

  @override
  void initState() {
    blocksToBeShownNotifier = ValueNotifier<List<BlockWidget>>(widget.blocks);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 5 * blockHeight,
      width: 5 * blockWidth,
      margin: EdgeInsets.all(2.0),
      child: ValueListenableBuilder<List<BlockWidget>>(
        valueListenable: blocksToBeShownNotifier,
        builder: (BuildContext context,List<BlockWidget> value, Widget child) {
        return Stack(
        children: value.map((block) {
          int index = value.indexOf(block);
          return TransformedWidget(
            key: ValueKey(block.widgetId),
            block: block,
            stackIndex: index,
            onDragStart:(){
              blocksToBeShownNotifier.value = widget.blocks.sublist(0, index);
            },
            onDragCanceled:(){
              blocksToBeShownNotifier.value = widget.blocks;
            },
            attachedBlocks: widget.blocks.sublist(index),
          );
        }).toList(),
      );
      },),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（），
);
}
}
类MyHomePage扩展StatefulWidget{
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
列出区块小部件；
最终列表WidgetColor=[
颜色，红色，
颜色，棕色，
颜色，黑色，
颜色，粉色，
颜色。灰色
];
@凌驾
void initState（）{
super.initState（）；
blockWidgets=新列表（）；
对于（int i=0；i